兼容性问题系列总结(一)

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

猜你喜欢

转载自blog.csdn.net/lhjuejiang/article/details/80752334