首页 > 代码库 > 干货!前端常见兼容性问题

干货!前端常见兼容性问题

各大浏览器兼容问题

1. HTML对象获取问题

FireFoxdocument.getElementById("idName");

ie:document.idname或者document.getElementById("idName").

解决办法:统一使用document.getElementById("idName");

 

2. const问题

说明:Firefox,可以使用const关键字或var关键字来定义常量;

IE,只能使用var关键字来定义常量.

解决方法:统一使用var关键字来定义常量.

 

3. event.xevent.y问题

说明:IE,event对象有x,y属性,但是没有pageX,pageY属性;

Firefox,event对象有pageX,pageY属性,但是没有x,y属性.

解决方法:使用mX(mX   =   event.x   ?   event.x   :   event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

 

4. window.location.href问题

说明:IE或者Firefox2.0.x,可以使用window.locationwindow.location.href;

Firefox1.5.x,只能使用window.location.

解决方法:使用window.location来代替window.location.href.

 

8. document.formName.item(itemName) 问题

问题说明:IE下,可以使用document.formName.item(itemName) document.formName.elements ["elementName"]Firefox 下,只能使用document.formName.elements["elementName"]

解决方法:统一使用document.formName.elements["elementName"]

 

9. 集合类对象问题

问题说明:IE下,可以使用 () [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。

解决方法:统一使用 [] 获取集合类对象。

 

15. Table操作问题

问题说明:iefirefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对tabletrinnerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。

解决方法://table追加一个空行:

var row = otable.insertRow(-1);var cell = document.createElement("td");cell.innerHTML = "";cell.className = "XXXX";row.appendChild(cell);[] 由于俺很少使用JS直接操作表格,这个问题没有遇见过。建议使用JS框架集来操作table,如JQuery

 

17. innerTextIE中能正常工作,但在FireFox中却不行.   

需用textContent

解决方法:

if(navigator.appName.indexOf("Explorer")   >   -1){

        document.getElementById(‘element‘).innerText   =   "my   text";

}   else{

        document.getElementById(‘element‘).textContent   =   "my   text";

}

 

20. FFIEBOX模型解释不一致导致相差2px

box.style{width:100;border 1px;}

ie理解为box.width = 100

ff理解为box.width = 100 + 1*2 = 102  //加上边框2px

 

解决方法:div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反, IE不能识别!important这个属性,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

 

27. 页面的最小宽度

如上一个问题,IE不识别min,要实现最小宽度,可用下面的方法:

 

#container{ min-width: 600px; width:expression(document.body.clientWidth600? "600px": "auto" );}

 

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

 

22. ulol列表缩进问题

消除ulol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;

经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0pxpadding:0px以及list-style:none三项才能达到最终效果。

 

23. 元素水平居中问题

FF: margin:0 auto;

iE: 父级{ text-align:center; }

 

设置为floatdivie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

 

 33. 对齐文本与文本输入框

加上vertical-align:middle;

 

<style type="text/css">

<!--

input {

width:200px;

height:30px;

border:1px solid red;

vertical-align:middle;

}

-->

</style>

 

3085435780

干货!前端常见兼容性问题