Solutions for compatibility with various browsers in CSS

1. Several browsers in CSS support different keywords, which can be repeatedly defined for browser compatibility
! Important can be recognized by FireFox and IE7
* It can be recognized by IE6 and IE7.
_ Being recognized by IE6
* + Can be recognized by IE7

Difference between IE6 and FF:
Background: orange; * background: blue;
Difference between IE6 and IE7:
Background: green! Important; background: blue;
Difference between IE7 and FF:
Background: orange; * background: green;
Difference FF, IE7, IE6:
Background: orange; * background: green! Important; * background: blue;
IE7 and IE8 compatibility:
<Meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7"/>

2. Condition comments dedicated to IE
<! -- 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] -->

3. Several browsers explain the actual pixels
IE/Opera: actual width of the object = (margin-left) + width + (margin-right)
Firefox/Mozilla: actual width of the object = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-right-width) + (margin-right)

4. mouse gesture: The cursor attribute of FireFox does not support hand, but both pointer and IE are supported. Therefore, pointer is used for compatibility.

5. When setting the Style attribute of the HTML Tag in FireFox, all positions, width, height, and size values must be followed by px. IE also supports this method, so the unit of px is uniformly added. For example, Obj. Style. Height = imgObj. Style. Height + 'px ';

6. fireFox cannot parse the abbreviated padding attribute settings, such as padding 5px 4px 3px 1px; it must be changed to padding-top: 5px; padding-right: 4px; padding-bottom: 3px; padding-left: 1px0;

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

8. Transparent CSS control: IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60); FireFox: opacity: 0.6;

9. CSS rounded corners: IE: corner corners are not supported;

FireFox:-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;

10. CSS double-line concave and convex border: IE: border: 2px outset;

FireFox:
-Moz-border-top-colors: # d4d0c8 white;
-Moz-border-left-colors: # d4d0c8 white;
-Moz-border-right-colors: #404040 #808080;
-Moz-border-bottom-colors: #404040 #808080;

11. IE supports the CSS method cursor: url () to customize the Color Style of the cursor Style File and scroll bar. FireFox does not support either of the above.

12. IE has the bug that the Select control is always at the top layer, and all CSS does not work for the Select control.

13. IE supports Label labels in Form, including images and text content. FireFox does not support Label containing images. clicking an image cannot make Radio or CheckBox labeled label for produce results.

14. TextArea in FireFox does not support onScroll events

15. FireFox does not support display inline and block

16. FireFox sets margin-left for Div, and margin-right is centered when it is set to auto, but not in IE.

17. When FireFox sets text-align for the Body, the Div needs to set margin: auto (mainly margin-left margin-right) to be centered.

18. It is best to set the CSS style of the hyperlink in the following order: L-V-H-. That is
<Style type = "text/css">
<! --
A: link {}
A: visited {}
A: hover {}
A: active {}
-->
</Style>
In this way, the hover and active styles are not available for some accessed hyperlinks.

19. set long paragraph wrap in IE and set word-wrap: break-word in CSS. The javascript insertion method is used in FireFox. The specific code is as follows:
<Script type = "text/javascript">
/* <! [CDATA [*/
Function toBreakWord (el, intLen ){
Var obj = document. getElementById (el );
Var strContent = obj. innerHTML;
Var strTemp = "";
While (strContent. length> intLen ){
StrTemp + = strContent. substr (0, intLen) + "";
StrContent = strContent. substr (intLen, strContent. length );
}
StrTemp + = "" + strContent;
Obj. innerHTML = strTemp;
}
If (document. getElementById &&! Document. all) toBreakWord ("div_id", 37 );
/*]> */
</Script>

20. After the floating attribute is added to the sub-container, the container cannot be automatically opened.
Solution: Add a clear floating CSS clear: both to the next tag after the Tag ends;

For more information, click the next page!

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page