前端常见的浏览器兼容问题

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容

一、样式初始化

由于各大浏览器会有自身的默认样式，并且不尽相同，所以为了尽可能的保证样式的统一性，前端在开发项目之前都会先进行样式格式化，最常见的分为以下几个方面。

1.pandding 值和 margin 值均设置为 0

将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。

2.html 标签

设置统一的字体，如果使用 rem 单位，则 html 需要设置合适的字号。

3.a 标签

设置统一的颜色，将 text-decoration 属性设置为 none。

4.ol 和 li 标签

list-style 统一设置为 none。

5.input、textarea、select、button 等标签初始化

border 设置为 none；

根据需要设置颜色和背景色。

二、使用不同类型的浏览器内核前缀

1.Chrome（谷歌浏览器）与 Safari（苹果浏览器）内核：Webkit （中译无）前缀：-webkit-
2.IE （IE浏览器）内核：Trident （中译三叉戟）前缀：-ms-
3.Firefox （火狐浏览器）内核：Gecko（中译壁虎）前缀：-moz-
4.Opera （欧朋浏览器）内核：Presto（中译迅速）前缀：-o-

例：

-webkit-border-radius: 10px; /谷歌浏览器/
-ms-border-radius: 10px; /IE浏览器/
-moz-border-radius: 10px; /火狐浏览器/
-o-border-radius: 10px; /欧朋浏览器/
border-radius: 10px;

三、针对IE浏览器不同版本的解决方案

1.对于低版本的 IE 浏览器使用 CSS hack（即给特点前缀）

注：以下符号是写在属性名前面。

兼容 IE6 的 hack 符号：- 或 _

兼容 IE6 、7 的 hack 符号：` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 任意一个符号

兼容 IE6、7、8 的 hack 符号：.

注：以下符号是写在属性值与分号直接，中间不留空格。

兼容 IE8 的 hack 符号：\0/

兼容 IE8、9、10 的 hack 符号：\0

兼容 IE6、7、8、9、10 的 hack 符号：\9

例：

/hack符号在前/
_border-radius: 10px; /IE6/
+border-radius: 10px; /IE6\7/
.border-radius: 10px; /IE6\7\8//hack符号在后/
border-radius: 10px\0/; /IE8/
border-radius: 10px\0; /IE8\9\10/
border-radius: 10px\9; /IE6\7\8\9\10/

2.为不同的版本编写独立的样式，其他浏览器识别不到。

例：大于 IE9 的浏览器使用这个单独的 style9.css 样式

例：只有 IE6 浏览器使用的 style6.css 样式

四、其他特殊样式

1.cursor 属性的 hand 值和 pointer 值

问题：firefox 浏览器不支持 hand 值，但其他浏览器均支持 pointer 值。
解决: 统一使用 cursor 属性的 pointer 值。

2.水平居中

问题：IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现水平居中。

解决: 可通过设置父级 text-align:center 实现。

3.属性值 “inherit”

问题：IE8 及IE8 以下版本浏览器不支持属性值 “inherit”。

解决：谨慎使用属性值 “inherit”。

五、JS兼容性

1.ES6语法

问题：IE11 不支持箭头函数、class 语法等（报 SCRIPT1002: 语法错误），不支持 Set 和 Map 数据结构（不报错）及 Promise 对象，支持 let 和 const，IE10 及以下不支持任何 ES6 语法。

解决：如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。

2.操作 tr 标签

问题：IE9 及 IE9 以下版本浏览器，不能操作 tr 标签的 innerHTML 属性。

解决：可以操作 td 标签的 innerHTML 属性。

3.Ajax

问题：IE9 及 IE9 以下版本浏览器无法使用 Ajax 获取接口数据。

解决：在使用 Ajax 请求之前设置 jQuery.support.cors=true。

4.event 对象的 srcElement 属性

问题：IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性，没有 target 属性。

解决：obj = event.target?event.target:event.srcElement。

5.DOM 事件绑定

问题：IE8 及 IE8 以下版本浏览器是用 attachEvent() 方法，而其他浏览器是 addEventListener() 方法。

解决：判断 IE 浏览器版本，如果是 IE8 及以下事件绑定则使用 attachEvent() 方法，注意 attachEvent() 方法的用法，第一个参数为“onclick” 而不是“click”。并且没有第三个参数。

常见的兼容性问题：

1、不同浏览器的标签默认的外边距( margin )和内边距(padding)不同

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

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现双边距问题

解决方案：设置display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距

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

5、IE9一下浏览器不能使用opacity

解决方案：

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持

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

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置position:relative