JavaScript在IE和Firefox中兼容性问题总结

发布时间:2020-06-05编辑:脚本学堂
本文总结下,javascript在IE与Firefox中的一些兼容性问题,总结的相当全面,正在研究javascript的不要错过了。
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.

例如:
 

复制代码 代码示例:

Firefox:
<body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>

IE&Firefox:
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>

15. 事件委托方法
 

IE:document.body.onload = inject; //Function inject()在这之前已被实现
Firefox:document.body.onload = inject();


有人说标准是:
 

document.body.onload=new Function('inject()');

16. firefox与IE(parentElement)的父元素的区别
IE:obj.parentElement
firefox:obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

17.cursor:hand VS cursor:pointer
firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer

18.innerText在IE中能正常工作,但是innerText在FireFox中却不行.
解决方法:
 

if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";

19. FireFox中类似 obj.style.height = imgObj.height 的语句无效

解决方法:
 

obj.style.height = imgObj.height + 'px';

16、访问的父元素的区别
问题说明:在IE下,使用 obj.parentElement 或 obj.parentNode 访问obj的父结点;在firefox下,使用 obj.parentNode 访问obj的父结点。
解决方法:因为firefox与IE都支持DOM,因此统一使用obj.parentNode 来访问obj的父结点。

17、innerText的问题.

问题说明:innerText在IE中能正常工作,但是innerText在FireFox中却不行。

解决方法:在非IE浏览器中使用textContent代替innerText。

示例:
 

复制代码 代码示例:
if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = ";my text";
}
 

[注] innerHTML 同时被ie、firefox等浏览器支持,其他的,如outerHTML等只被ie支持,最好不用。

18、Table操作问题

问题说明:ie、firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不
管用。document.appendChild在往表里插入行时FIREFOX支持,IE不支持

解决办法:把行插入到TBODY中,不要直接插入到表

解决方法:
 

复制代码 代码示例:
//向table追加一个空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);

[注] 建议使用JS框架集来操作table,如JQuery。

19、对象宽高赋值问题

问题说明:FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法:统一使用 obj.style.height = imgObj.height + 'px';

20、setAttribute('style','color:red;')

FIREFOX支持(除了IE,现在所有浏览器都支持),IE不支持

解决办法:不用setAttribute('style','color:red')

而用object.style.cssText = 'color:red;'(这写法也有例外)

最好的办法是上面种方法都用上,万无一失

21、类名设置
setAttribute('class','styleClass')
FIREFOX支持,IE不支持(指定属性名为class,IE不会设置元素的class属性,相反只使用setAttribute时IE自动识CLASSNAME属性)

解决办法:
 

复制代码 代码示例:
setAttribute('class','styleClass')
setAttribute('className','styleClass')
或直接 object.className='styleClass';

IE和FF都支持object.className。

22、用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');

FIREFOX支持,IE不支持

解决办法:

IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数

如下:
 

var obj = document.getElementById('objId');
obj.onclick=function(){fucntionname();};

这种方法所有浏览器都支持

23、建立单选钮

IE以外的浏览器
 

复制代码 代码示例:

var rdo = document.createElement('input');

rdo.setAttribute('type','radio');

rdo.setAttribute('name','radiobtn');

rdo.setAttribute('value','checked');

IE:

 

var rdo =document.createElement("<input name="radiobtn" type="radio" value="checked" />");

解决办法:

这一点区别和前面的都不一样。这次完全不同,所以找不到共同的办法来解决,那么只有IF-ELSE了

万幸的是,IE可以识别出document的uniqueID属性,别的浏览器都不可以识别出这一属性。问题解决。