常见浏览器兼容问题
JS相关
1. const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
2. event.srcElement问题
问题说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。
解决方法:使用srcObj =event.srcElement ?event.srcElement : event.target;
3. 事件绑定
IE:dom.attachEvent();
其他浏览器:dom.addEventListener();
标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元素)最后标准方亦觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener第三个参数的由来,而且事件冒泡作为了默认值。
4. 操作tr的html
在ie9以下,不能操作tr的innerHTML
5. ajax略有不同
IE:ActiveXObject
其他:xmlHttpReuest
6. event.x 与 event.y 问题
在IE中,event 对象有x,y属性,FF中没有
在FF中,与 event.x 等效的是 event.pageX ,但event.pageX IE中没有
故采用 event.clientX 代替 event.x ,在IE中也有这个变量
event.clientX 与 event.pageX 有微妙的差别,就是滚动条
要完全一样,可以这样:
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
7. innerText的问题
问题:
innerText 在IE中能正常工作,但是innerText 在FireFox中却不行
解决方法:
在非IE浏览器中使用textContent代替innerText
CSS相关
1. cursor:hand VS cursor:pointer
firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer
2. 图片默认有间距
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
解决方案:使用float属性为img布局
3. css中的width和padding
在IE7和FF中width宽度不包括padding,在Ie6中包括padding.
4. 元素水平居中问题
FF: margin:0auto;
IE: 父级{ text-align:center; }
5. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
例如:
<div id="imfloat">
#imfloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
6. 页面的最小宽度
IE不识别min,要实现最小宽度,可用下面的方法:
#container{ min-width: 600px;width:expression(document.body.clientWidth< 600? "600px": "auto" );}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7. IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。