Summary of solutions to JavaScript incompatibility issues between IE and Firefox_javascript skills

1.兼容firefox的 outerHTML，FF中没有outerHtml的方法。

复制代码 代码如下:

if (window.HTMLElement) {
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode.replaceChild(df,this);
return sHTML;
});
HTMLElement.prototype.__defineGetter__("outerHTML",function() {
var attr;
var attrs=this.attributes;
var str="<" this.tagName.toLowerCase();
for (var i=0;iattr=attrs[i];
if(attr.specified)
str =" " attr.name '="' attr.value '"';
}
if(!this.canHaveChildren)
return str ">";
return str ">" this.innerHTML "";
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
switch(this.tagName.toLowerCase()) {
case "area":
case "base":
case "basefont":
case "col":
case "frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link":
case "meta":
case "param":
return false;
}
return true;
});
}

2.集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
3.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

4.eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
5.变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
6.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法:
IE:

复制代码 代码如下:

...

IE&Firefox:

复制代码 代码如下:

...

9.Event.x and event.y issues
Explanation: Under IE, the even object has x, y attributes, but does not have pageX, pageY attributes; under Firefox, the even object has pageX, pageY attribute, but there is no x, y attribute.
Solution: Use mX (mX = event.x? event.x: event.pageX;) to replace event.x under IE or event.pageX under Firefox.

10.event.srcElement problem
Explanation: Under IE, the even object has the srcElement attribute, but no target attribute; under Firefox, the even object has the target attribute, but no srcElement attribute .
Solution: Use obj (obj = event.srcElement ? event.srcElement : event.target;) instead of event.srcElement under IE or event.target under Firefox.
11.window .location.href problem
Explanation: Under IE or Firefox2.0.x, you can use window.location or window.location.href; under Firefox1.5.x, you can only use window.location.
Solution: Use window.location instead of window.location.href.
12. Modal and non-modal window issues
Note: Under IE, the modal can be opened through showModalDialog and showModelessDialog Modal and non-modal windows; not available under Firefox.
Solution: Directly use window.open(pageURL, name, parameters) to open a new window.
If you need to pass parameters in the child window back to the parent window, you can use window.opener in the child window to access the parent window. For example: var parWin = window.opener; parWin.document.getElementById("Aqing"). value = "Aqing";
13.Frame problem
Take the following frame as an example:

(1) Access the frame object:
IE: Use window.frameId or window.frameName to access this frame object.
Firefox: You can only use window.frameName to access this frame object .
In addition, you can use window.document.getElementById("frameId") in both IE and Firefox to access this frame object.
(2) Switch frame content:
Can be used in both IE and Firefox Use window.document.getElementById("testFrame").src = "xxx.html" or window.frameName.location = "xxx.html" to switch the content of the frame.
If you need to pass the parameters in the frame back to the parent Window, you can use parent in frme to access the parent window. For example: parent.document.form1.filename.value="Aqing";
14.body problem
Firefox’s body exists before the body tag is fully read by the browser; and IE's body must exist after the body tag is completely read by the browser.
For example:
Firefox:

Copy code The code is as follows:

IE&Firefox :

Copy code The code is as follows:

15. Event delegate method
IE: document.body.onload = inject; //Function inject() in This has been implemented before
Firefox: document.body.onload = inject();
Some say the standard is:
document.body.onload=new Function('inject()');

16. The difference between the parent element of firefox and IE (parentElement)
IE: obj.parentElement
firefox: obj.parentNode
Solution: Because both firefox and IE support it DOM, so using obj.parentNode is a good choice.

17.cursor:hand VS cursor:pointer
firefox does not support hand, but ie supports pointer
Solution: Use pointer uniformly

18. innerText can work normally in IE, but innerText does not work in FireFox.
Solution:

Copy code The code is as follows:

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

19. Statements like obj.style.height = imgObj.height are invalid in FireFox
Solution:
obj.style.height = imgObj.height 'px';

20. IE, Firefox and other browsers have different operations on table tags. In IE, innerHTML assignment of table and tr is not allowed. When using js to add a tr, use The appendChile method doesn't work either.
Solution:

Copy code The code is as follows:

//Append one to the table Empty row:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = " XXXX";
row.appendChild(cell);

21. padding problem
padding 5px 4px 3px 1px FireFox cannot interpret the abbreviation,
must be changed into padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22. When eliminating the indentation of ul, ol and other lists
The style should be written as: list-style:none;margin:0px;padding:0px;
The margin attribute is valid for IE, and the padding attribute is valid for FireFox

23. CSS transparency
IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
FF:opacity:0.6.

24. CSS rounded corners
IE: Rounded corners are not supported.
FF: -moz-border-radius:4px, or -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz -border- radius- bottomright:4px;.
25. CSS double line bump border
IE: border:2px offset;.
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border- bottom-colors: #404040 #808080;

Here are also some related compatibility between IE and Firefox
A collection of solutions for incompatibility between IE and Firefox