开发过程中一些标签方面的问题的解决方案
HTML5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。
要实现这个效果很简单，只需要加一行css代码即可：
-webkit-overflow-scrolling : touch;
移动端文本超过限定的行数溢出省略...(-webkit-line-clamp:2;限定的行数)
-webkit-line-
lamp: 2;
{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;}
网页title标签里带logo图标的方法
加上<link type="image/x-icon" href="图片地址" rel="icon"> 就OK啦！
或者
加上<link rel="shortcut icon" href=".....(url)" type="image/x-icon">
《去掉a ,input标签的默认样式》
1.-webkit-tap-highlight-color: rgba(0,0,0,0);也可以写成-webkit-tap-highlight-color:
transparent; 去掉点击时高光显示 你也可以更改里面的参数 达到你想要的点击显示高光效果
2.-webkit-touch-callout: none; //长按页面时不触发系统菜单
3.-webkit-user-select: none; //长按无法选择文本 这个很有用 一般如果body里面没有添加
这个属性的手机页面 当我们长按某段文字的时候就会出现选中这段文字弹出“复制，全选”等
选项 但在webapp开发里 这个就显得很不友好 所以尤其是在webapp开发的时候 为了达到与
native一样的真实效果 必须的添加
4.html,body{ width: 100%; height: 100%;} 这个是整个文档的初始化宽高度 后面的子级都
是按照这个数据设置
a{
text-decoration:none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
color: #222;
}
input{
outline:none;
border:none;
-webkit-tap-highlight-color:rgba(255,255,255,0);
}
内容过多超出时多余的内容省略为...
{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
内容过多超出时（且为2行时）多余的内容省略为...
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
去除苹果手机在form表单中按钮的圆角的默认样式
input[type="submit"],input[type="reset"],input[type="button"],select,button {-
webkit-appearance: none;}
兼容IE在头部添加meta方法
<meta http-equiv="X-UA-Compatible" content="IE=edge">
《是否开启input框的输入内容记录属性》
<input autocomplete="off" type="text"/>
是否开启input框的输入内容记录 autocomplete="off"
《防止用户复制和保存图片》
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
是防止用户复制和保存图片,只支持iphone、ipad、android
-webkit-text-size-adjust: 100%;是防止用户修改字体大小
-webkit-touch-callout: none; //长按页面时不触发系统菜单
-webkit-user-select: none; //长按无法选择文本
body{
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
}
去掉select下拉框默认箭头更换箭头样式
appearance:none;
-moz-appearance:none;/*去掉自带箭头*/
-webkit-appearance:none;/*去掉自带箭头*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat
scroll right center transparent;/*更换箭头图片*/
direction: rtl;/*option内容文字居右对齐*/
《设置placeholder的字体颜色》
因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号
前面写input和textarea)。
::-webkit-input-placeholder { /* WebKit browsers */
color:#999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:#999;
}
winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;}
webkit表单输入框placeholder的颜色值能改变么
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
webkit表单输入框placeholder的文字能换行么
ios可以，android不行~
在textarea标签下都可以换行~
IE10（winphone8）表单元素默认外观如何重置
禁用 select 默认下拉箭头
::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏
(display:none) 并使用背景图片来修饰可得到我们想要的效果。
select::-ms-expand {
display: none;
}
《select中的下拉值点击后会直接跳到该选项指向的地址》
onchange="if(this.options[this.selectedIndex].value!=''){window.location.href=
(this.options[this.selectedIndex].value);}"
禁用 radio 和 checkbox 默认样式
::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏
(display:none) 并使用背景图片来修饰可得到我们想要的效果。
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check
{
display: none;
}
禁用PC端表单输入框默认清除按钮
当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，
同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear
{
display: none;
}
禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
禁止ios和android用户选中文字
.css{-webkit-user-select:none}
参考《如何改变表单元素的外观(for Webkit and IE10)》
打电话发短信写邮件怎么实现
打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
写邮件，可参考《移动web页面给用户发送邮件的方法》
<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>
手机拍照和上传图片
<input type=”file”>的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
清除移动端浏览器缓存
的解决方案是在调试阶段或者频繁更新的页面加入以下头信息：
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
