JavaScript and CSS Browser compatibility summary

Some browser compatibility makes a summary of the following issues:

Why does this phenomenon occur? The main performance for Firefox such a well-supported browser standard, which is now the best CSS support browser, and IE it appears earlier, in the Web support has not done very well.

There are a lot of things that appear ff and IE are different from their default display, and how this default style should be 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: Unify the use of document.getElementById ("Idname");

2.const problem
Description: Under Firefox, you can use Constkeyword or varkeyword to define constants;
Under IE, you can only use Varkeyword to define constants.
Workaround: Use Varkeyword 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 a 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, can use window.location or window.location.href;
Under firefox1.5.x, only window.location can be used.
Workaround: Use window.location to replace Window.location.href.

5. Modal and non-modal form problems
Description: Under IE, the modal and non-modal forms can be opened via ShowModalDialog and showModelessDialog; Firefox is not.
WORKAROUND: Open the new form directly by using window.open (pageurl,name,parameters) mode.
Suppose you need to pass the number of references in the subform back to the parent form, and you can use Window.opener in the subform to access the parent form.
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) Visit the Frame object:
IE: Use Window.frameid or window.framename to access the frame object. Frameid and FrameName can have the same name.
Firefox: You can only use Window.framename to access the frame object.
Other than that. You can use Window.document.getElementById ("Frameid") in both IE and Firefox to access this frame object.

(2) Switch frame content:
Window.document.getElementById ("Testframe") can be used in both IE and Firefox. src = "xxx.html" or window.frameName.location = "xxx.ht ML "to toggle the contents of the frame.
Suppose you need to pass the number of references in the frame back to the parent form (note that it is not opener, but parent frame). You can use the parent in a frame to access the parents form. 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: Since 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 can work properly in IE.   But innertext in Firefox, but not. 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 the HTML tag in Firefox. The values for all positional and font dimensions 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 contain padding. Include padding in Ie6.

14.css hack
Depending on the level of support for CSS styles in different browsers, the parsing results and the prioritization of CSS recognition, designers can write different CSS style codes based on the characteristics of these different browsers. IE6 can recognize the underscore _ and asterisk *,ie7 can recognize the asterisk *, do not recognize the underscore _, and Firefox two is not recognized, so. It is possible to write different codes for IE6.IE7 and FF by using these special symbols.

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

This style shows the effect: in Firefox, the background color is green. In IE7, the background color is red. In IE6, the background color is blue.

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

Just for IE7, add *+html in front of the CSS, such as:
*+html #left {
Clear:both;
}

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

15. Use IE-specific conditional gaze

<!--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 recognize. So in the case of IE, it is actually interpreted as: div{maring:30px;margin:28px}
Repeated definition, according to the last one to run, so can not just write 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) and finally the width of the div is 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 changes such as the following Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}



Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.

JavaScript and CSS Browser compatibility summary