Summary of Solutions to CSS browser compatibility problems

The solutions to CSS browser compatibility are summarized as follows:
 
1. Several browsers in CSS support different keywords, which can be repeatedly defined in browser compatibility! Important can be recognized by FireFox and IE7 * can be recognized by IE6 and IE7 _ can be 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"/>

The latest compatibility scheme is as follows:

. E {
Color: # FFF;/* FF, OP */
[; Color: #0F0;]/* Sa, CH */
Color: # FFF \ 9;/* IE6, 7, 8 */
* Color: # FF0;/* IE7, 6 */
_ Color: # F00;/* IE6 */
}

2. application Condition annotation, because browsers of different IE versions have different interpretations of the WEB standard pages we have created. Specifically, they have different interpretations of CSS. To be compatible with these, you can use condition annotations to define them separately to achieve compatibility.
 
For example:
<! -First, use the css.css style sheet.->
<Link rel = "stylesheet" type = "text/css" href = "css.css"/>
<! -[If IE 7]>
<! -If the iebrowser version is "7", use the ie7.css style sheet.->
<Link rel = "stylesheet" type = "text/css" href = "ie7.css"/>
<! [Endif]->
<! -[If lte IE 6]>
<! -If the iebrowser is smaller than or equal to 6, use the ie.css style sheet.->
<Link rel = "stylesheet" type = "text/css" href = "ie.css"/>
<! [Endif]->

This differentiates the implementation of CSS by IE7 and IE6 to achieve compatibility. At the same time, the first line of CSS is compatible with other non-ie browsers.

Note: The default CSS style should be located at the first line of the HTML document. All the content for condition annotation judgment must be located after the default style.

3. several browsers explain actual pixels. IE/Opera: actual object width = (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 controls 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-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 {}: active {} --> </style> to avoid having the hover and active styles out of 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 automatically open the solution: Add a clear floating CSS clear: both to the next tag after the Tag ends;

21. After floating, IE6 explains that the outer margin is double the actual margin. Solution: add the display: inline

22. There is a gap below IE6. Solution: add the display: block to img or set the vertical-align attribute to vertical-align: top | bottom | middle | text-bottom

23. There is a gap between the two layers in IE6. Solution: set the right div to floating float: left or define margin-right:-3px relative to IE6;

24. The display method <style type = "text/css"> <! -- Li {width: 200px; white-space: nowrap; text-overflow: ellipsis;-o-text-overflow: ellipsis; overflow: hidden ;} --> </style> (applicable only to IE)

25. Set the element height and Row Height to the same value to vertically center the text <style type = "text/css"> <! -- Div {height: 30px; line-height: 30px;} --> </style>

26. align text and text input boxes. vertical-align: middle must be added to CSS; attribute settings <style type = "text/css"> <! --... ... Vertical-align: middle;} --> </style>

27. If a browser that supports WEB Standards sets a fixed height value, it will not be opened like IE6, but wants to set a fixed height and want to be opened? The solution is to remove the height attribute and set min-height. To ensure compatibility with IE6 that does not support min-height, you can define {height: auto! Important; height: 200px; min-height: 200px ;}

28. In the web standard, IE cannot set the color of the scroll bar. Solution: Set the body in CSS to <style type = "text/css"> <! -- Html {scrollbar-face-color: # f6f6f6; scrollbar-highlight-color: # fff; scrollbar-shadow-color: # eeeeee; scrollbar-3dlight-color: # eeeeee; scrollbar-arrow-color: #000; scrollbar-track-color: # fff; scrollbar-darkshadow-color: # fff ;}--> </style>

29. IE6 containers with a height of about 1 px cannot be defined due to the default line height problem. Solution: Set the container in CSS, for example, overflow: hidden | zoom: 0.08 | line-height: 1px.

30. Set transparent properties for Flash so that the layer is displayed on top of Flash <param name = "wmode" value = "transparent"/> <! -- Solve the problem on IE //> <embed wmode = "transparent "...... > <! -- Solve the problem on FireFox //>

31. After setting the Padding attribute in FireFox, the Width and Height attribute values will be added accordingly. IE will not solve the problem: use! The important method defines a set of Height and Width.

32. fireFox ignores spaces between div and div, but IE processes them. Therefore, do not enter spaces or press Enter between two connected div, otherwise, the format of different browsers may be incorrect, such as the famous 3px deviation, and the cause is difficult to find out.

33. <div id = "parent"> <div id = "content"> </div>, even if the height of the parent is set to 100% or auto, auto scaling cannot be properly performed in different browsers. A space with a height of 1 is generated at the bottom of the layer, the Code is as follows: <div id = "parent"> <div id = "content"> </div> <div style = "font: 0px/0px sans-serif; clear: both; display: block "> </div>

34. The sizes of small are different for IE and FireFox. FireFox is 13px and IE is 16px.

35. IE and FireFox have different sizes for spaces. FireFox is 4px and IE is 8px.

Articles you may be interested in

• Common CSS browser compatibility problems
• JQuery obtains the height and width of the visible area of the browser window, and the height of the scroll bar.
• Solved the problem that the returned content disappears after the form is submitted incorrectly.
• Js obtains the height of the scroll bar from the top and bottom of the browser. It is compatible with ie and firefox.
• Invincible firewheel effect in the address bar of JavaScript Browser
• Using JavaScript to prohibit browsers from directly copying article content
• How to solve the problem that the DIV layer is covered by Flash (compatible with IE and Firefox browsers) and how to display the DIV layer on FLASH
• Chrome (Google chrome) does not support form. submit ($ ('form'). submit) Solution