兼容性问题总结

1. overflow: auto; IOS手机滚动卡顿

-webkit-overflow-scrolling: touch; //有回弹效果 

2. a标签或者button标签等，点击后会有蓝色边框；去掉难看的点击的高亮效果

* {
  outline: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

3. CSS动画页面闪白,动画卡顿 图片模糊 或者 有毛边

transform: translate3d(0,0,0)

4.input 的placeholder属性会使文本位置偏上

line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法

5.一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发

cursor:pointer

6.不让 Android 手机识别邮箱

<meta content="email=no" name="format-detection" />

7.禁止ios和android用户选中文字

-webkit-user-select:none

8.fixed定位缺陷

ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案： 可用iScroll插件解决这个问题

9. calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
div { 
    width: 95%; 
    width: -webkit-calc(100% - 50px); 
    width: calc(100% - 50px); 
}