干货！前端常见兼容性问题-白红宇

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

阅读量：4948 次

发布时间：2019-06-11

本文共 2767 字，大约阅读时间需要 9 分钟。

各大浏览器兼容问题

1. HTML对象获取问题

FireFox：document.getElementById("idName");

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

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

2. const问题

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

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

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

3. event.x与event.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.location或window.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操作问题

问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用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. innerText在IE中能正常工作，但在FireFox中却不行.

需用textContent。

解决方法:

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

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

} else{

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

}

20. FF和IEBOX模型解释不一致导致相差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.clientWidth＜ 600? "600px": "auto" );}

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

22. ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;

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