Summary of Firefox and IE compatibility issues and solutions

During the development of multi-language java websites, code that can run normally in FF is found to be unavailable in IE, and vice versa. The incompatibility and unified methods of IE and Firefox in JavaScript are summarized as follows:

1. compatible with firefox's outerHTML and FF, there is no outerHtml Method
Copy codeThe Code is as follows:
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; I <attrs. length; I ++) {= "" attr = "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. Collection class Object Problems

Note: in IE, you can use () or [] to obtain collection class objects. In Firefox, you can only use [] to obtain collection class objects. Solution: use [] to obtain collection class objects.

3. Custom Attributes

Note: in IE, you can use the method to obtain general attributes to obtain custom attributes, or use getAttribute () to obtain Custom Attributes. In Firefox, you can only use getAttribute () obtain custom attributes. solution: getAttribute () is used to obtain custom attributes.

4. eval ("idName") Problems

Note: in IE, you can use eval ("idName") or getElementById ("idName") to obtain the HTML object whose id is idName. In Firefox, you can only use getElementById ("idName ") to obtain the HTML object whose id is idName. solution: getElementById ("idName") is used to retrieve the HTML object whose id is idName.

5. The variable name is the same as the ID of an HTML object.

Note: In IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document; in Firefox, it cannot. in Firefox, you can use the same variable name as the HTML Object ID; in IE, you cannot. Solution: Use document. getElementById ("idName") replaces document. idName. we recommend that you do not use variable names with the same HTML Object ID to reduce errors. When declaring variables, add var to avoid ambiguity.

6. const Problems

Note: In Firefox, you can use the const keyword or var keyword to define constants. in IE, you can only use the var keyword to define constants. Solution: Use the var keyword to define constants.

7. input. type attribute Problems

Description: The input. type attribute in IE is read-only, but the input. type attribute in Firefox is read/write.

8. window. event Problems

Note: window. event can only be run in IE, but not in Firefox. This is because Firefox event can only be used in the event. solution:

IE:
<Input name = "Button8_1" type = "button" value = "IE" onclick = "javascript: gotoSubmit8_1 ()"/>
...
<Script language = "javascript">
Function gotoSubmit8_1 (){
...
Alert (window. event); // use window. event
...
}
</Script>
IE & Firefox:
<Input name = "Button8_2" type = "button" value = "IE" onclick = "javascript: gotoSubmit8_2 (event)"/>
...
<Script language = "javascript">
Function gotoSubmit8_2 (evt ){
...
Evt = evt? Evt :( window. event? Window. event: null );
Alert (evt); // use evt
...
}
</Script>

9. event. x and event. y

Note: In IE, the even object has the x and y attributes, but does not have the pageX and pageY attributes. In Firefox, the even object has the pageX and pageY attributes, but does not have the x and y attributes. solution: Use mX (mX = event. x? Event. x: event. pageX;) to replace event. x in IE or event. pageX in Firefox.

10. event. srcElement Problems

Note: In IE, the even object has the srcElement attribute, but does not have the target attribute. In Firefox, the even object has the target attribute, but does not have the srcElement attribute. solution: Use obj (obj = event. srcElement? Event. srcElement: event.targettoken used to replace event.tar get under firefox.

11. window. location. href

Note: windows can be used in IE or Firefox2.0.x. location or window. location. href; In Firefox1.5.x, only windows can be used. location. solution: Use window. location to replace window. location. href.

12. Modal and non-modal window Problems

Note: in IE, you can use showModalDialog and showModelessDialog to open modal and non-modal windows; in Firefox, no. solution: directly use window. open (pageURL, name, parameters) to open a new window.

If you want to pass the parameters in the Child window back to the parent window, you can use window in the Child window. opener to access the parent window. for example, var parWin = window. opener; parWin.doc ument. getElementById ("Aqing "). value = "Aqing ";

13. frame Problems

The following frame is used as an example:

<Frame src = "xxx.html" id = "frameId" name = "frameName"/>

(1) Access frame object: IE: Use window. frameId or window. frameName to access this frame object. Firefox: Accessing ument. getElementById ("frameId") to access this frame object.

(2) Switching frame content: In ieand firefox, you can switch frame content by using upload Doc ument. getElementById ("testFrame"). src = "xxx.html" or window. frameName. location = "xxx.html.

If you want to return parameters in the frame to the parent window, you can use parent in frme to access the parent window. Example: parent.doc ument. form1.filename. value = "Aqing ";

14. Search for Problems

Take the following getElementByClass as an example:

Document. getElementByClass ("classname1"); this function does not work in IE and can be used

GetElementsByClassName is replaced, but this function returns a match with NodeList instead of a single object, such:
Copy codeThe Code is as follows:
Var list, index;
List = document. getElementsByClassName ("classname1 ");
For (index = 0; index <list. length; ++ index ){
List [index]. setAttribute (/*...*/);
}

For such issues, it is best to use class libraries such as jQuery, Prototype, Google Closure, etc.. These class libraries are compatible with all browsers, which saves a lot of time to deal with these compatibility issues.

For instance, in jQuery:

$ (". Home1"). attr (/*...*/);

15. body Problems

The body of Firefox exists before the body tag is fully read by the browser. The body of IE must exist only after the body tag is fully read by the browser.

For example:

Firefox:
Copy codeThe Code is as follows:
<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>

Event Delegate Method

IE: document. body. onload = inject; // Function inject () has been implemented before this

Firefox: document. body. onload = inject ();

Some people say the standard is:

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

The difference between firefox and IE (parentElement) parent Elements

IE: obj. parentElement firefox: obj. parentNode

Solution: because both firefox and IE support DOM, 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

18. innerText works normally in IE, but innerText does not work in FireFox.

Solution:
Copy codeThe Code is as follows:
If (navigator. appName. indexOf ("Explorer")>-1 ){

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

} Else {

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

}

The statement similar to obj. style. height = imgObj. height in FireFox is invalid.

Solution:

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

IE, firefox, and other browsers have different operations on table labels. in ie, assigning values to innerHTML of table and tr is not allowed. When adding a tr using js, the appendChile method does not work.

Solution:
Copy codeThe Code is as follows:
// Append an empty row to the table:
Var row = otable. insertRow (-1 );
Var cell = document. createElement ("td ");
Cell. innerHTML = "";
Cell. className = "XXXX ";
Row. appendChild (cell );

Padding Problems

Padding 5px 4px 3px 1px FireFox cannot be abbreviated,

Must be changed to padding-top: 5px; padding-right: 4px; padding-bottom: 3px; padding-left: 1px;

When the indentation of ul and ol lists is eliminated

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.

CSS transparency

IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).

FF: opacity: 0.6.

CSS rounded corner

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 ;.

CSS double-line concave-convex border

IE: border: 2px outset;

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

Conclusion:

For such issues, it is best to use class libraries such as jQuery, Prototype, Google Closure, etc.. These class libraries are compatible with all browsers, which saves a lot of time to deal with these compatibility issues.