JavaScript compatibility with multiple browsers

Javascript compatibility with multiple browsers
I. document. formName. item ("itemName ")
Problem description: in IE, you can use document. formName. item ("itemName") or document. formName. elements ["elementName"]; In Firefox, only document. formName. elements ["elementName"].
Solution: Use document. formName. elements ["elementName"].
Ii. Collection objects

Problem description: 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.
Iii. Custom Attributes
Problem description: 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: Get custom attributes through getAttribute.
Iv. eval ("idName") Problems
Problem description: 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: Use getElementById ("idName") to retrieve the HTML object with id as idName.
5. The variable name is the same as the ID of an HTML object.
Problem description: in IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document, but not in Firefox. In Firefox, the variable name that is the same as the ID of the HTML object can be used, IE.
Solution: Use document. getElementById ("idName") to replace document. idName. We recommend that you do not use variable names with the same HTML Object ID to reduce errors. When declaring variables, add the var keyword to avoid ambiguity.
Vi. const Problems
Problem description: 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.
VII. input. type attributes

Problem description: The input. type attribute in IE is read-only, but the input. type attribute in Firefox is read/write.
Solution: do not modify the input. type attribute. If you must modify it, You can first hide the original input, and then insert a new input element at the same position.
8. window. event Problems
Problem description: window. event can only be run in IE, but not in Firefox, because Firefox event can only be used in the event.
Solution: add the event parameter to the function where the event occurs and use var myEvent = evt? Evt :( window. event? Window. event: null)
Example:
<Input type = "button" onclick = "doSomething (event)"/>
<Script language = "javascript">
Function doSomething (evt ){
Var myEvent = evt? Evt :( window. event? Window. event: null)
...
}
9. event. x and event. y
Problem description: 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: var myX = event. x? Event. x: event. pageX; var myY = event. y? Event. y: event. pageY;
If you consider 8th issues, use myEvent instead of event.
10. event. srcElement Problems
Problem description: 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 srcObj = event. srcElement? Event. srcElement: event.tar get;
If you consider 8th issues, use myEvent instead of event.
11. window. location. href
Problem description: 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. Of course, you can also consider using the location. replace () method.
12. Modal and non-modal window Problems
Problem description: in IE, you can open modal and non-modal windows through showModalDialog and showModelessDialog; in Firefox, you cannot.
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. opener in the Child window to access the parent window. If the parent window is required to control the child window, use varsubWindow = window. open (pageURL, name, parameters); to obtain the new window object.
13. frame and iframe Problems
The following frame is used as an example:
(1) access the frame object
IE: Use window. frameId or window. frameName to access this frame object;
Firefox: Use window. frameName to access this frame object;
Solution: You can access the frame object by using the metadata Doc ument. getElementById ("frameId;
(2) Switching frame content
In both IE and Firefox, you can use the upload Doc ument. getElementById ("frameId"). src then modify webjx.com.html "or window. frameName. location then modify webjx.com.html" to switch the frame content;
If you want to return the parameters in the frame to the parent window, you can use the parent keyword in the frame to access the parent window.
14. body Loading Problems
Problem description: Firefox's body object exists before the body tag is fully read by the browser, While IE's body object must exist after the body tag is fully read by the browser.
[Note] the problem has not been verified. You can modify it after verification.
[Note] It has been verified that IE6, Opera9, and FireFox2 do not have the above problems. A simple JS script can access all objects and elements that have been loaded before the script, this element is not loaded yet.
15. Event delegation Method
Problem description: Use document in IE. body. onload = inject; function inject () has been implemented before this; in Firefox, use document. body. onload = inject ();
Solution: Use document. body. onload = new Function ('inject () '); or document. body. onload = function () {/* here is the code */}
[Note] differences between functions
16. Differences between parent elements for access
Problem description: in IE, use obj. parentElement or obj. parentNode to access the parent node of obj. In firefox, use obj. parentNode to access the parent node of obj.
Solution: because both firefox and IE support DOM, obj. parentNode is used to access the parent node of obj.
17. innerText problems.

Problem description: innerText works normally in IE, but innerText does not work in FireFox.
Solution: Use textContent instead of innerText in a non-IE browser.
Example:
If (navigator. appName. indexOf ("Explorer") & gt;-1 ){
Document. getElementById ('element'). innerText = "my text ";
} Else {
Document. getElementById ('element'). textContent = "; my text ";
}
[Note] innerHTML is supported by ie, firefox, and other browsers at the same time. Others, such as outerHTML, are only supported by ie, so it is best not to use it.
18. Table Operation Problems
Problem description: 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 value is added to js, the appendChild method does not work. Supported by FIREFOX when document. appendChild is inserted into the table, but not by IE
Solution: Insert rows into the TBODY instead of the table.
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 );
[Note] we recommend that you use the JS framework set to operate tables, such as JQuery.
19. Assignment of object width and height
Problem description: The statement similar to obj. style. height = imgObj. height in FireFox is invalid.
Solution: Use obj. style. height = imgObj. height + 'px ';
20. setAttribute ('style', 'color: red ;')
Supported by FIREFOX (except IE, supported by all browsers now), not by IE
Solution: Do not use setAttribute ('style', 'color: red ')
Use object.style.css Text = 'color: red; '(this is also an exception)
The best way is to use the above methods.
Ii. Class Name settings
SetAttribute ('class', 'styleclass ')
Supported by FIREFOX and not supported by IE (if the attribute is specified as class, IE will not set the class attribute of the element. On the contrary, IE will automatically recognize the CLASSNAME attribute only when setAttribute is used)
Solution:
SetAttribute ('class', 'styleclass ')
SetAttribute ('classname', 'styleclass ')
Or directly object. className = 'styleclass ';
Both IE and FF support object. className.
Ii. Use setAttribute to set events
Var obj = document. getElementById ('objid ');
Obj. setAttribute ('onclick', 'funcitonname ();');
Supported by FIREFOX, not supported by IE
Solution:
In IE, you must use the vertex method to reference the required event handler and assign the anonymous Function
As follows:
Var obj = document. getElementById ('objid ');
Obj. onclick = function () {fucntionname ();};
All browsers support this method.
Ii. Create a radio button
Browsers other than 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 "/> ");
Solution:
The difference is different from the previous one. This time is completely different, so we cannot find a common solution, so only IF-ELSE is available.
Fortunately, IE can identify the uniqueID attribute of the document. other browsers cannot recognize this attribute. Solve the problem.

CSS compatibility with multiple browsers

1. DOCTYPE affects CSS Processing

2. FF: After padding is set, the div will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.

3. FF: supported! Important, IE is ignored, available! Important sets a special style for FF

4. vertical center problem of div: vertical-align: middle; Increase the line spacing to the same height as the entire DIV line-height: 200px; then insert the text, and the vertical center is finished. The disadvantage is that you need to control the content rather than line feed.

5. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. solution:

Div {margin: 30px! Important; margin: 28px ;}

Note that the order of the two margin cannot be reversed ,! The important attribute IE cannot be identified, but other browsers can. So in IE, it is actually explained as follows:

Div {maring: 30px; margin: 28px}

If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: XXpx! Important;

Browser differences
1. Questions about ul and ol list indentation

When the indentation of ul and ol lists is eliminated, 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.

[Note] It has been verified that in IE, setting margin: 0px can remove indentation, white spaces, list numbers, or dots from the top, bottom, and right of the list. Setting padding does not affect the style. In Firefox, setting margin: 0px can only remove the upper and lower spaces. After setting padding: 0px, only the left and right indentation can be removed. You must also set list-style: none to remove list numbers or dots. In other words, you can set only margin: 0px in IE to achieve the final effect. In Firefox, you must set both margin: 0px, padding: 0px, and list-style: none can achieve the final effect.

2. CSS transparency

IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
FF: opacity: 0.6.
[Note] it is best to write both of them and put the opacity attribute below.

3. CSS rounded corners

IE: ie7 or earlier versions do not support rounded corners.
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 ;.
[Note] the rounded corner problem is a classic issue in CSS. We recommend that you use the JQuery framework set to set the rounded corner so that you can leave these complicated problems for others to think about. However, jQuery only supports rounded corners of the entire area and does not support rounded corners of the border. However, the rounded corners of this border can be achieved through some simple means. Next time you will have the opportunity to introduce it.

4. cursor: hand VS cursor: pointer

Problem description: firefox does not support hand, But ie supports pointer. Both are hand-shaped indicators.
Solution: Use pointer in a unified manner.

5. Different font size definitions

The font size of small is defined differently. Firefox is 13px, While IE is 16px. The difference is quite large.

Solution: Use the specified font size, such as 14px.

The div and div of multiple elements (images or links) arranged in parallel are ignored in firefox, in IE, spaces (about 3px) are displayed by default ).

6. CSS double-line concave and convex border
IE: border: 2px outset ;.
FF:-moz-border-top-colors: # d4d0c8 white;-moz-border-left-colors: # d4d0c8white;-moz-border-right-colors: #404040 #808080;-moz-border-bottom-colors: #404040 #808080;

Browser bug
1. IE bilateral distance bug

The div set to float doubles the margin set in ie. This is a bug in ie6.

Solution: Add display: inline In the div;

For example:
<# Div id = "imfloat">

# IamFloat {
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */
}
# IamFloat {
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */
}

There are too many questions about CSS, and even the display effects of the same CSS definition in different page standards are different. A developing suggestion is that the pages are written in the standard XHTML standard, and table is rarely used. CSS definition should follow the standard DOM as much as possible, while taking into account mainstream browsers such as IE, Firefox, and Opera. In many cases, FF and Opera's CSS interpretation standards are closer to CSS standards and more normative.

2. Space BUG in IE Selection
A space can also invalidate the style. See the following code:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "// www.w3.org/5o/xhtml">
<Head>
<Title> </title>
<Style type = "text/css">
<! --
P {font-size: 12px ;}
P: first-letter {font-size: 300%}
-->
</Style>
</Head>
<Body>
<P> you are a person in the world, but you are a person in the whole world. Never frown even when you are sad, because you don't know who will fall in love with your smile. </P>
</Body>
</Html>

This Code defines the first character style of <p> in IE6, Which is ineffective (IE7 is not tested), but in p: first-letter and {font-size: 300%} with a space, that is, p: first-letter {font-size: 300%}, the display is normal. But the same code is normal in FireFox. In principle, p: first-letter {font-size: 300%} is correct. So where is the problem? The answer is "-" in a pseudo-class "-". IE has a BUG. When dealing with pseudo-classes, if the pseudo-class name contains a hyphen (-), the pseudo-class name must be followed by a space. Otherwise, the style definition will be invalid. In FF, the processing can be done without spaces.