div CSS Compatibility Summary_Experience Exchange

The difference between IE6 and FF:
background:orange;*background:blue;
The difference between IE6 and IE7:
background:green !important;background:blue;
The difference between IE7 and FF:
background :orange; *background:green;
Difference between FF, IE7, IE6:
background:orange;*background:green !important;*background:blue;
IE7, IE8 compatible:

HEAD
1. Several browsers support different keywords in CSS, and browser compatibility can be repeatedly defined.
!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
2. IE-specific conditional comments







3. Several browsers’ interpretation of actual pixels
IE/Opera: The actual width of the object = (margin-left) width (margin- right)
Firefox/Mozilla: Actual width of object = (margin-left) (border-left-width) (padding- left) width (padding-right) (border-right-width) (margin-right) 4. Mouse gesture problem: The cursor attribute of FireFox does not support hand, but it supports pointer, and IE supports both; so for compatibility, pointer is used
5. When setting the Style attribute of the HTML tag in FireFox, all positions, The width, height and size values ​​must be followed by px. IE also supports this writing method, so the px unit is added uniformly.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 eliminating the indentation of lists such as ul and ol, the style should be written as: list-style:none;margin:0px;padding:0px;where margin The property is valid for IE, and the padding property is valid for FireFox
8. CSS control transparency: IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox: opacity:0.6;
9 . CSS controls rounded corners: IE: does not support rounded corners;
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 bump 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 cursor style file and scroll bar color style; FireFox supports Both of the above are not supported
12. IE has a bug where the Select control is always on top, and all CSS does not work on the Select control
13. IE supports Label tags in Form, including pictures and text content. ; FireFox does not support Label containing pictures. Clicking on the picture will not cause the Radio or CheckBox labeled label for to have an effect
14. TextArea in FireFox does not support the onScroll event
15. FireFox does not support the inline and block of display
16. When FireFox sets margin-left and margin-right to auto on Div, it is already centered, but it does not work in IE
17. When FireFox sets text-align on Body, Div needs to set margin: auto (mainly margin-left margin -right) before centering
18. It is best to set the CSS style of hyperlinks in this order: L-V-H-A.That is

This can avoid that some hyperlinks after being visited will not have the hover and active styles
19. Setting long paragraphs to automatically wrap in CSS in IE Set word-wrap:break-word in FireFox; use JS insertion method to achieve this in FireFox. The specific code is as follows:

20. After adding the floating attribute to the sub-container, the container will not be able to open automaticallySolution: Add a CSS clear:both;
21. After floating, IE6 interprets the outer margin as double the actual margin in the next tag after the tag ends
Solution: Add display:inline
22. There will be a gap below the image under IE6
Solution: add 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 under IE6
Solution: Set the right div to also float float:left or define margin-right:-3px; relative to IE6;
24. After the content in LI exceeds the length, How to display ellipses

25. Convert the height of the element to Set the line height to the same value to vertically center the text

26. To align text and text input boxes, you must add vertical-align:middle; attribute settings in CSS



27. If a browser that supports WEB standards sets a fixed height value, it will not be stretched like IE6, but you want to set a fixed height and be able to be stretched? The solution is to remove the height attribute and set min-height. In order Compatible with IE6 that does not support min-height, it can be defined as follows:
{
height:auto!important;
height:200px;
min-height:200px;
}
28. IE cannot set the scroll bar color in web standards
Solution: Change the setting of body in CSS to html