常见的浏览器兼容性问题

1、event.x 和 event.y 问题
说明:ff 下 event 对象有 pageX、pageY 属性,但是没有 x,y 属性;
ie 下,event 对象有 x,y 属性,但是没有 pageX,pageY 属性;
解决办法:使用 mX = event.x?event.x:event.pageX 来代替 ie 下的 event.x 或者ff下的 event.pageX。

2、event.srcElement问题
问题说明:ie 下, event 对象有 srcElement 属性,但是没有 target 属性;
ff下,event 对象有 target 属性,但是没有 srcElement 属性。
解决办法:使用 srcObj = event.srcElement?event.srcElement:event.target;

3、cursor:hand 和 cursor:pointer
ff 不支持 hand,ie 支持 pointer
解决办法:统一使用 pointer

4、innerText 在 ie 中能正常使用,在 ff 中需要使用 textContent。
解决办法:

if(navigator.)

5、ff 和 ie 盒子模型理解不一致

6、透明度问题
标准:opacity:0.6
IE :filter:alpha(opacity=60)

7、元素水平居中的问题:
FF: margin:0 auto
IE:{text-align:center}

8、ul和ol列表缩进的问题
消除ul和ol等列表的缩进时,样式应该写成:list-style:none,margin:0;padding:0;
ie中,设置margin:0,可以去除上下左右缩进、空白以及列表编号或者圆点,设置padding对样式没有影响。在ff中,设置margin仅可以去除上下的空白,设置padding:0仅仅缩进左右的间距,还必须设置list-style:none才能去除样式列表。

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

10、页面的最小宽度问题:
IE不识别min,要实现最小宽度,可以用下面的方法:

#container{
min-width:600px;
width:expression(document.body.clientWidth<600?'600px':'auto')
}

第一个min-width是正常的,但是第2行的width使用js,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过了js的判断来实现的最小宽度。

11、在IE下无法定义行高1px的容器

原因是IE的默认行高造成的,默认行高大约为12px-14px,解决办法有很多
如 height:1px ;overflow:hidden 或者height:1px;fontsize:0px;

12、context.getElemensByClassName() 在IE6~8不兼容

13、context.querySelector/querySelecotrAll 在IE6~8不兼容,并且通过它获取到的节点集合不存在DOM映射。

14、children在IE~IE8下不兼容。

15、previousElementSibling,nextElementSibiling,lastElementChild,firstElementChild都不兼容

推荐阅读更多精彩内容