兼容性问题系列总结（一）

之前有写过css知识点系列总结，觉得效果还不错，所以打算把遇到的兼容性问题也汇总到一起，就当记笔记喽（也是会持续更新滴）

2018/6/20

--js兼容性问题--

1. JSON 解析问题：

   ecmascript5 通过 JSON 对象进行处理，ecmascript5 之前通过 eval 进行解析；

2. 自定义属性问题：

   IE 下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；

   Firefox下，只能使用 getAttribute( )获取自定义属性。   

   解决方法：

   统一通过 getAttribute() 获取自定义属性，不过更推荐直接通过 “点” 运算符访问元素属性。

3. 事件对象兼容性问题：

   非标准 IE 和 chrome 下可以通过全局 event 对象来获取，标准（包括标准 IE，chrome 等）浏览器通过事件函数的第一个参数传入。

4. 事件源对象

   IE 下使用 event.srcElement，标准下使用 event.target 来获取。

5. 阻止事件冒泡

   通常可以通过 event.cancelBubble = false 来阻止，但是标准推荐使用 event.stopPropagation() 方法来阻止；

6. 事件默认行为的阻止

   DOM1 事件绑定中(属性 on... 的方式)可以通过 return false 来阻止，但是在 DOM2 的事件绑定中(addEventListener)中，只能通过 event.preventDefault() 方法来阻止。

-- CSS兼容性问题 --

1. 不加文档声明IE下会陷入怪异合模型解析；

2. IE6 下高度小于 19px 的元素，高度会被当作 19px 处理（可利用 overflow 解决）；

3. chrome 下字体大小小于 12px 时会被当作 12px 来处理 （目前只能截图处理）；

4. 在 IE8 以前的 IE 中不识别 HTML5 新增的标签； （可利用 document.createElement 来创建该标签）；

5. 在 IE6 下，块元素有浮动 ，左右的 margin 值会被放大成两倍（display:inline）；

6. 在 IE6,7 下 li 本身没有浮动，但是内容浮动了，li 下边就会多出间隙( li 加浮动或 vertical-align:top )；