前端技术你不知道的技术

常见浏览器兼容问题

2019-05-22  本文已影响170人  Victor_818

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使用固定高和宽。页面结构尽量简单。

上一篇 下一篇

猜你喜欢

热点阅读