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

落日映苍穹つ 2022-05-22 09:08 225阅读 0赞

之前有写过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 )；