Common CSS Errors and Solutions

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 between FF, IE7, IE6: background:orange;*background:green !important;*background:blue;
IE7, IE8 compatible: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
1. CSS supports different keywords in several browsers, 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 <!-- 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 below --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
3. Interpretation of actual pixels by several browsers 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 problem: The cursor property of Firefox does not support hand, but supports pointer, while IE supports both; so for compatibility, pointer is used.
5. When setting the Style attribute of HTML tags in FireFox, all position, width, height and size values ​​must be followed by px. IE also supports this writing method, so px units are added uniformly. For example, Obj.Style.Height = imgObj.Style.Height + 'px';
6. FireFox cannot parse the abbreviated padding property 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 ul, ol and other lists, 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. CSS controls 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 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 cursor style files and scroll bar color styles; FireFox does not support either of the above.
12. IE has a bug where the Select control is always on the top layer, and all CSS does not work on the Select control.
13. IE supports Label tags in Form, including images and text content; FireFox does not support Labels containing images. Clicking on the image does not make the Radio or CheckBox marked with label for take effect. 14. TextArea in FireFox does not support onScroll event
15. FireFox does not support inline and block display
16. When setting margin-left and margin-right to auto for Div, it is already centered in FireFox, 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 follow the following order when setting CSS styles for hyperlinks: LVHA. That is, <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style> This can prevent some visited hyperlinks from not having hover and active styles
19. To set automatic line break for long paragraphs in IE, set word-wrap:break-word in CSS; in FireFox, use JS insertion method to implement it. 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 adding the float attribute to the child container, the container will not expand automatically. Solution: add a CSS clear:both to clear the float in the next tag after the tag ends;
21. After floating, IE6 interprets the outer margin as double the actual margin. Solution: add display:inline
22. There will be a gap below the image in IE6. Solution: add display:block to the img or set the vertical-align property to vertical-align:top | bottom | middle | text-bottom
23. Solution to the problem of gap between two layers in IE6: set the right div to float as well, or define margin-right:-3px relative to IE6;
24. How to display ellipsis when the content in LI exceeds the length <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style> (only applicable to IE)
25. Set the element's height and line-height to the same value to vertically center text <style type="text/css"> <!-- div { height:30px; line-height:30px; } --> </style>
26. To align text with the text input box, add the vertical-align:middle; property setting in CSS <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 stretched like IE6. But what if you want to set a fixed height and still be able to stretch? The solution is to remove the height attribute and set min-height. In order to be compatible with IE6 that does not support min-height, you can define it like this: { height:auto!important; height:200px; min-height:200px; }
28. Solution to the inability to set scrollbar color in IE in web standards: Change the setting of body in CSS to html <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 cannot define a container with a height of about 1px due to the default line height problem. Solution: Set the container in CSS as follows: overflow:hidden | zoom:0.08 | line-height:1px
30. Setting the transparency property for Flash can make the layer appear on top of Flash <param name="wmode" value="transparent" /> <!-- Solve the problem on IE//> <embed wmode="transparent" …… > <!-- Solve the problem on FireFox//>
31. FireFox will increase the Width and Height attribute values ​​accordingly after setting the Padding attribute, but IE will not. Solution: Use the !important method to define an additional set of Height and Width
32. FireFox ignores spaces between divs, but IE does. Therefore, try not to have spaces or carriage returns between two connected divs, otherwise it may cause incorrect formats between different browsers, such as the famous 3px deviation. And the reason is difficult to find out.
33. In the following format <div id="parent"> <div id="content"> </div> </div> When the Content is large, even if the parent is set to 100% or auto, it still cannot stretch automatically in different browsers; the solution is to create a space with a height of 1 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> </div>
34. IE and FireFox interpret the font size of small differently, FireFox is 13px, IE is 16px
35. IE and FireFox interpret the size of the space differently, FireFox is 4px, IE is 8px