浏览器兼容性及ios、安卓兼容性优化整理

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战 !

浏览器兼容优化

由于浏览器的分类、内核、版本不同，所以同样的代码在不一样的浏览器上运行就存在兼容性问题

1. const 问题

   Firefox浏览器下，可以使用const关键字来定义常量；IE下，只能使用var关键字来定义常量

2. IE9以下浏览器不能使用opacity

   解决方案：opacity:0.5;filter:alfha（opacity=50）; filter:progid:DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);

3. cursor：hand显示手型在safari上不支持

   解决方案：统一使用cursor：pointer

4. 图片默认有间距

   解决方案：使用 float 为 img 布局

5. css中的width和padding

   在IE7和FF中width宽度不包括padding，在Ie6中包括padding

6. IE6下图片下有空隙产生

   解决方案：设置img为display:block 设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom

7. margin加倍的问题

   设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug 解决方案:在这个div里面加上display:inline;

8. 不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同

   解决方案：css里增加通配符*{margin：0；padding：0}

ios、安卓兼容性

1. ios 设置input 按钮样式会被默认样式覆盖

   input,textarea {
     border: 0;
     -webkit-appearance: none;
   }
   

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

   -webkit-user-select:none
   

3. ios下取消input在输入的时候英文首字母的默认大写

   <input autocapitalize="off" autocorrect="off" />
   

4. 禁止 ios 弹出各种操作窗口

   -webkit-touch-callout:none
   

5. ios会识别长串数字为电话,导致变色

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

6. ios系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

   可以通过正则去掉 `this.value = this.value.replace(/\u2006/g, '');`
   

7. input输入框聚焦

   input输入框在聚焦的时候，ios有时候会出现outline或者阴影，安卓则是显示正常的

   解决方案：

   input:focus{outline:none} input:{-webkit-appearance: none;}
   

8. fixed定位缺陷

   ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位

   android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位

   ios4下不支持position:fixed

   解决方案:用iScroll插件

9. input输入框type类型为number的时候会出现上下的箭头

   解决方案: 隐藏箭头

   input::-webkit-outer-spin-button, 
   input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; }