JavaScript and CSS Browser compatibility issues summary

Some browser compatibility issues do a summary below:

Why is this happening? The main is like Firefox browser good support of the standard, is currently the best CSS support browser, and IE is appearing earlier, in the support of the Internet is not very good. There's a lot of things. The root cause of the difference between FF and IE is that their default display is different, and how this default style is displayed I know there are no corresponding standards in W3.

Here's a summary of compatibility issues for both browsers:

1.HTML Object Acquisition Issues
FireFox:document.getElementById ("Idname");
Ie:document.idname or document.getElementById ("Idname").
Solution: Uniform Use of document.getElementById ("Idname");

2.const problem
Note: Under Firefox, constants can be defined using the Const keyword or the var keyword;
Under IE, you can only use the var keyword to define constants.
Workaround: Use the var keyword uniformly to define constants.

3.event.x and EVENT.Y problems
Description: Under IE, the even object has an X, y attribute but no pagex,pagey attribute;
Under Firefox, the even object has the Pagex,pagey property, but there is no X, Y property.
Workaround: Use mx (mx = event.x? Event.x:event.pagex) to replace IE under the Event.x or Firefox under the Event.pagex.

4.window.location.href problems
Description: Under IE or firefox2.0.x, you can use window.location or window.location.href;
firefox1.5.x, you can only use window.location.
WORKAROUND: Use window.location instead of window.location.href.

5. Modal and non-modal window problems
Description: Under IE, the modal and non-modal windows can be opened by ShowModalDialog and showModelessDialog; Firefox is not.
WORKAROUND: Open a new window directly using window.open (pageurl,name,parameters).
If you need to pass parameters from a 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";

6.frame problem
Take the following frame as an example:
<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>

(1) To access the Frame object:
IE: Use Window.frameid or window.framename to access the frame object. Frameid and FrameName can have the same name.
Firefox: Only use Window.framename to access this frame object.
In addition, Window.document.getElementById ("Frameid") can be used in both IE and Firefox to access the frame object.

(2) Switch frame content:
You can use Window.document.getElementById ("Testframe") in both IE and Firefox. src = "xxx.html" or window.frameName.location = "xxx.ht ML "to toggle the contents of the frame.
If you need to pass the arguments in the frame back to the parent window (note that it is not opener, but the parent frame), you can use parent in the frame to access the parent window. For example: parent.document.form1.filename.value= "aqing";

7. The difference between Firefox and IE's parent element (parentelement)
IE:obj.parentElement
Firefox:obj.parentNode
Workaround: Because both Firefox and IE support DOM, using Obj.parentnode is a good choice.

8.cursor:hand VS Cursor:pointer
Firefox does not support hand, but IE supports pointer
Workaround: Use pointer uniformly

9.innerText works in IE, but innertext is not available in Firefox. Need textcontent.
Workaround:
if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). InnerText = "my text";
} else{
document.getElementById (' element '). Textcontent = "my text";
}

When you set the style of an HTML tag in Firefox, all positional and font size values must be followed by PX. This IE is also supported.

padding problems
padding 5px 4px 3px 1px Firefox cannot explain shorthand,
Must be changed into padding-top:5px;   padding-right:4px;   padding-bottom:3px; padding-left:1px;

So it's recommended to write separately

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

Width and padding in 13.css
Width widths in IE7 and FF do not include padding, and padding are included in Ie6.

14.css hack
Depending on how the browser supports CSS styles, the parsing results and the prioritization of CSS are different, designers can write different CSS style codes based on the features of these different browsers. IE6 can recognize the underscore _ and asterisk *,ie7 can recognize the asterisk *, do not recognize the underscore _, and Firefox two are not recognized, so you can for IE6.IE7 and FF by the use of these special symbols to write different code.

<style>
div{
Background:green; /* for FireFox */
*background:red; /* for IE7 */
_background:blue; /* for IE6 */
}
</style>

The effect of this style is: Green in Firefox, background color red in IE7, and blue in IE6 background color.

For Ie7/firefox in front of the CSS with [xmlns], such as the Left property below, if I want to work only for Ie7/firefox, the following wording:
[xmlns] #left {
Float:left;
BORDER:4PX solid #999;
padding:5px;
width:200px;
height:200px;
}
Only works for IE6, you can add HTML to the front of the CSS, such as:
* HTML #left {
Clear:both;
}

Only works for IE7 and *+html in front of CSS, such as:
*+html #left {
Clear:both;
}

The order of writing is written in the front of Firefox, IE7 written in the middle, IE6 written in the last side.

15. Use IE-specific conditional annotations

<!--other browsers--
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>

<!--[if IE 7]>
<!--suitable for IE7---
<link rel= "stylesheet" type= "Text/css" href= "Ie7.css"/>
<! [endif]-->

<!--[If LTE IE 6]>
<!--suitable for IE6 and---
<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>
<! [endif]-->

16. The box model in Mozilla Firefox and IE does not explain inconsistencies resulting in 2px resolution: div{margin:30px!important;margin:28px;}
Note that the order of the two margin must not be written in reverse, according to the statement!important this property IE is not recognized, but other browsers can be recognized. So under IE actually explains this: div{maring:30px;margin:28px}
Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

17.ie5 and IE6 's box explanations are inconsistent.
IE5 under div{width:300px;margin:0 10px 0 10px;}
The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated as 300px+10px (right padding) +10px (left padding) =320px. At this point we can make the following changes Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}



JavaScript and CSS Browser compatibility issues summary