Summary of compatibility between javascript and css browsers, javascriptcss

Summary of compatibility between javascript and css browsers, javascriptcss

Some browser compatibility issues are summarized below:

Why does this happen? The main reason is that browsers like Firefox support W3C standards well and are currently the best browsers for CSS support, while ie appeared earlier and did not do well in w3c support. There are many things that show different FF and IE display. The root cause is that their default display is different, and how to display this default style? I know there are no corresponding standards in w3 to define.

The following describes the compatibility of the two browsers:

1. HTML object Acquisition Problems
FireFox: document. getElementById ("idName ");
Ie: document. idname or document. getElementById ("idName ").
Solution: Use document. getElementById ("idName") in a unified manner ");

2. const Problems
Note: In Firefox, you can use the const keyword or var keyword to define constants;
In IE, constants can only be defined using the var keyword.
Solution: Use the var keyword to define constants.

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

4. window. location. href
Note: in IE or Firefox2.0.x, you can use window. location or window. location. href;
Only window. location.
Solution: Use window. location to replace window. location. href.

5. 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. opener in the Child window to access the parent window.
For example, var parWin = window. opener; parWin.doc ument. getElementById ("Aqing"). value = "Aqing ";

6. 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. frameId and frameName can have the same name.
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 need to return the parameters in the frame to the parent window (note that it is not opener but parent frame), you can use parent in the frame to access the parent window. Example: parent.doc ument. form1.filename. value = "Aqing ";

7. Differences between firefox and IE parent elements (parentElement)
IE: obj. parentElement
Firefox: obj. parentNode
Solution: 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
Solution: Use pointer

9. innerText works normally in IE, but innerText does not work in FireFox. textContent is required.
Solution:
If (navigator. appName. indexOf ("Explorer")>-1 ){
Document. getElementById ('element'). innerText = "my text ";
} Else {
Document. getElementById ('element'). textContent = "my text ";
}

10. When setting the style of HTML tags in FireFox, the values of all positional and font sizes must be followed by px. This ie is also supported.

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

Therefore, we recommend that you write data separately.

12. Transparent CSS
IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
FF: opacity: 0.6.

13.width and padding in CSS
In IE7 and FF, width does not include padding, and Ie6 includes padding.

14. css hack
Depending on the degree of support of different browsers for CSS styles, the resolution result and the priority for recognizing CSS are different, designers can write different CSS style codes based on the characteristics of these different browsers. IE6 can recognize underscores (_) and asterisk (*). IE7 can recognize asterisks (*) and cannot recognize underscores (_). firefox cannot recognize both of them, you can 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 is displayed as follows: In FireFox, the background color is green; In IE7, the background color is red; in IE6, the background color is blue.

 

For IE7/firefox, add [xmlns] to the front of css. For the left attribute below, if I want to work only for IE7/firefox, write as follows:
[Xmlns] # left {
Float: left;
Border: 4px solid #999;
Padding: 5px;
Width: 200px;
Height: 200px;
}
For IE6 only, you can add * html in front of css, for example:
* Html # left {
Clear: both;
}

It only works for IE7. Add * + html in front of css, for example:
* + Html # left {
Clear: both;
}

 

The order of writing is in front of FireFox, in the middle of IE7, and in the end of IE6.

15. Use IE-specific condition 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 later -->
<Link rel = "stylesheet" type = "text/css" href = "ie.css"/>
<! [Endif] -->

16. 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 entries must not be reversed. According to Alibaba Cloud! 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;

17. The BOX interpretations of IE5 and IE6 are inconsistent.
Div {width: 300px; margin: 0 10px 0 10px;} under IE5 ;}
The div width is interpreted as 300px-10px (right fill)-10px (left fill). The final div width is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can modify div {width: 300px as follows! Important; width/**/: 340px; margin: 0 10px 0 10px}

Zookeeper