Compatibility between IE and Firefox

Compatibility between IE and Firefox

From: http://blog.csdn.net/powerglover/archive/2009/01/15/3789631.aspx

1. Event Problems
In IE, we can directly use the event variable, but in Firefox, because the event is a local variable, in Firefox, We can bind the event to an element, for example
<Input type = "button" onclick = "doevent (event)">
To be compatible with both IE and FirefoxCodeObtain the event.
VaR theevent = Window. Event | E;
VaR srcelement = theevent. srcelement;
If (! Srcelement ){
Srcelement = theevent.tar get;
}

2. Filter Problems
In IE,. Filters. Alpha. Opacity is used.
In Firefox,. style. Opacity is used.
It is generally used to set the transparency of elements, so we generally use the following code to solve the compatibility problem.
VaR Ie = navigator. useragent. indexof ("MSIE")> 0? 1: 0;
If (IE)
{
OBJ. Filters. Alpha. opacity;
}
Else
{
OBJ. style. opacity;
}

3. innertext
In IE, we often use innertext, but Firefox does not support this method. Generally, we write it as textcontent. it is compatible with both IE and Firefox. We recommend that you use textcontent. we can also use innerhtml instead of HTML tags.

4. event. srcelement
In ie, the event object has the srcelement attribute, but does not have the target attribute. In Firefox, the event object has the target attribute, but does not have the srcelement attribute.
Solution: Use OBJ (OBJ = event. srcelement? Event. srcelement: event.tar get ;)

5. parentnode replaces parentelement
In IE, I can obtain the parent element through obj. parentelement, but not in firex.
Because Firefox and IE support DOM, we can use obj. parentnode to solve all of them.

6. Collection objects
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 retrieve collection class objects.

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

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

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

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

11. Input. Type attribute Problems
Description: The input. Type attribute in IE is read-only, but the input. Type attribute in Firefox is read/write.

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

13. Window. Location. href

Note: in IE or firefox2.0.x, you can use window. Location or window. Location. href; In firefox1.5.x, you can only use window. location.
Solution: Use window. location to replace window. Location. href.

14. 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: 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 ";

15. Frame Problems

The following frame is used as an example:
<Frame src = "/xxx.html" id = "frameid" name = "framename"/>

(1) access the frame object:
IE: Use window. frameid or window. framename to access this frame object.
Firefox: only window. framename can be used to access this frame object.
In addition, both ieand firefoxcan access this frame object by using the upload metadata Doc ument. getelementbyid ("frameid.

(2) Switch frame content:
In both ieand firefox, you can use Upload upload Doc ument. getelementbyid ("testframe"). src = "xxx.html" or window. framename. Location = "xxx.html" to switch frame content.

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

16. 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:
<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>

17. Event delegation Method
IE: Document. Body. onload = inject; // function inject () has been implemented before this
Firefox: Document. Body. onload = inject ();
Document. Body. onload = new function ('inject ()');

18. cursor: Hand and cursor: pointer
Firefox does not support hand, But ie supports pointer
Solution: Use Pointer
19. The statement similar to OBJ. style. Height = imgobj. Height in Firefox is invalid.

Solution:
OBJ. style. Height = imgobj. height + 'px ';

20. Operations on table labels vary with IE, Firefox, and other browsers. in IE, assignment of innerhtml values to table and TR is not allowed. When a TR is added using JS, the appendchile method does not work.

Solution:
// 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 );

21. Padding Problems

Padding 5px 4px 3px 1px Firefox cannot be abbreviated. It must be changed to padding-top: 5px; padding-Right: 4px; padding-bottom: 3px; padding-left: 1px;

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

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 concave and 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;
26. ie supports document. firefox does not support all.
use one of the following three tags to replace document. all
getelementsbytagname ("tagname") to obtain a set of all tag elements
getelementbyid ("idname ") you can obtain an element by ID.
getelementsbyname ("name ") you can obtain an element by name attribute
27. Use innerhtml in Firefox

document. all. online. innerhtml; // This method can be used in IE, but it is not a standard method
document. getelementbyid ("online "). innerhtml; // Firefox can use innerhtml.
28w.eval()and window.exe cscript () execute the script
iemo-fireroxboth support eval(), firefoxdoes not support window.exe cscript ()
solution: Use eval ()
29. E. the button key value is different from the event. button, which has only three key values but no combination key value

30. insertadjacenthtml and insertadjacenttext
Insertadjacenthtml and insertadjacenttext are the unique Js in IE and are very useful.

Unfortunately, Firefox does not have these two things. However, in addition to the following sections, Firefox can also support this

Two methods

If (typeof htmlelement! = "Undefined "&&! Htmlelement. Prototype. insertadjacentelement)
{
Htmlelement. Prototype. insertadjacentelement = function (where, parsednode)
{
Switch (where)
{
Case 'beforebegin ':
This. parentnode. insertbefore (parsednode, this)
Break;
Case 'afterbegin ':
This. insertbefore (parsednode, this. firstchild );
Break;
Case 'beforeend ':
This. appendchild (parsednode );
Break;
Case 'afterend ':
If (this. nextsibling) This. parentnode. insertbefore (parsednode, this. nextsibling );
Else this. parentnode. appendchild (parsednode );
Break;
}
}

Htmlelement. Prototype. insertadjacenthtml = function (where, htmlstr)
{
VaR r = This. ownerdocument. createRange ();
R. setstartbefore (this );
VaR parsedhtml = R. createcontextualfragment (htmlstr );
This. insertadjacentelement (where, parsedhtml)
}

Htmlelement. Prototype. insertadjacenttext = function (where, txtstr)
{
VaR parsedtext = Document. createtextnode (txtstr)
This. insertadjacentelement (where, parsedtext)
}
}
31. elementfrompoint

IE has the elementfrompoint method, but Firefox does not. You can override this method.

Document. Prototype. elementfrompoint = function (x, y)
{
This. addeventlistener ("mousemove", this. elementfrompoint _ handler, false );
VaR event = This. createevent ("mouseevents ");
VaR box = this.getboxobjectfor(this.doc umentelement );
VaR screendelta = {X: box. screenx, Y: box. screeny };
Event. initmouseevent ("mousemove", true, false, this. defaultview, 0,
X + screendelta. X, Y + screendelta. Y, x, y,
False, false, 0, null );
This. dispatchevent (event );
This. removeeventlistener ("mousemove", this. elementfrompoint _ handler, false );
Return this. elementfrompoint _ target;
}
Document. Prototype. elementfrompoint _ handler = function (Event)
{
This. elementfrompoint _ target = event. explicitoriginaltarget;

If (this. elementfrompoint _ target. nodetype = node. text_node)
This. elementfrompoint _ target = This. elementfrompoint _ target. parentnode;

If (this. elementfrompoint _ target. nodename. touppercase () = "html" & this.doc umentelement. nodename. touppercase () = "html")
This. elementfrompoint _ target = This. getelementsbytagname ("body "). item (0);

// ***** added this code to check for textboxes and textareas
If (this. elementfrompoint _ target. nodename = "# document") // possible textbox or textarea
{< br> Rp = event. rangeparent;
alert ("event. rangeparent = "+ RP);
If (event. rangeparent. nodetype = node. text_node) // textbox with a value
This. elementfrompoint _ target = event. rangeparent. parentnode. parentnode;
else If (event. rangeparent. nodename = 'div ') // textbox without a value
This. elementfrompoint _ target = event. rangeparent. parentnode;
}< br> // ***** end. however this cause permission denied as the rangeparent object appears to be private!

Event. preventdefault ();
Event. stoppropagation ();
}
Document. Prototype. elementfrompoint _ target = NULL;

32. mousewheel event
Firefox does not have a mousewheel event. You can solve this problem by using the following methods.
<SCRIPT>
VaR n = 0;
Function mwevent (E)
{
If (! E) E = Window. event;
If (E. wheeldelta <= 0 | E. Detail> 0) {n ++ ;}
Else {n --;}
Window. Status = N;
}
If (document. attachevent ){
Document. attachevent ("onmousewheel", mwevent );
} Else {
Window. addeventlistener ("dommousescroll", mwevent, false );
}
</SCRIPT>

33. mouse wheel events of IE and Firefox
the code of wheel IE is different from that of Firefox:
IE is a mousewheel event, firefox is the dommousescroll event
event attribute, and IE is the event. wheeldelta, Firefox is event. detail
attributes have different direction values. ie rolls up> 0, Firefox rolls down> 0
// scroll up or down, based on prototype 1.6
var scrollfunc = function (event) {
var direct = 0;
If (event. wheeldelta) {
direct = event. wheeldelta> 0? 1:-1;
}else if (event. Detail) {
direct = event. Detail <0? 1:-1;
}< br> zoom (direct);
};
event. observe (document, 'mousewheel ', scrollfunc);
event. observe (document, 'domainscroll', scrollfunc); // firefox
34. attachevent method

Description of the attachevent method:
Attachevent has two parameters. The first parameter is the event name, and the second parameter is the method for response after the event is triggered. The solution in Firefox is
Object. Prototype. attachevent = function (method, func)
{
If (! This [Method])
This [Method] = func;
Else
This [Method] = This [Method]. Attach (func );
}
Function. Prototype. Attach = function (func ){
VaR F = this;
Return function (){
F ();
Func ();
}
}
36. Replacing ALT with title
Try to use title in Firefox and IE, and ALT does not work in Firefox

 

37. The difference between IE and Firefox in Dom parsing childnodes

 

 

<HTML> <body>
<Ul id = "Main">
<Li> 1 </LI>
<Li> 2 </LI>
</Ul>
<Input type = button value = "Click me! "
Onclick = "alert (document. getelementbyid ('main'). childnodes. Length)">
</Body> Hehe, in IE, 2, and in Firefox, 5. What is the problem? Ul only has two subnodes. Why does Firefox prompt five subnodes? Check the DOM structure of IE and Firefox and find the problem:
IE: <ul>

<Li>

# Text

 

<Li>

# Text

 

 

Firefox: <ul>

# Text

<Li>

# Text

 

<Li>

# Text

You should have discovered it, too? "# Text" indicates that the text (actually meaningless spaces and line breaks) will also be parsed into a node in Firefox, in IE, only meaningful texts are parsed into "# text ". So for Firefox, UL's fistchild in the above example is not the first Li, but # text (meaningless text between UL and the first Li), and lastchild is not the last Li, it is the meaningless text between the last Li and/ul.

The solution is to first use. getelementsbytagname ("Li") to obtain all nodes of Li. I think Firefox is better at this.ProgramThe employee has a headache and is not necessary.

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/powerglover/archive/2009/01/15/3789631.aspx