Shulou(Shulou.com)06/03 Report--

This article will explain in detail what common CSS errors are, and the editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

The code is as follows:

Distinguish IE6 from 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;

Distinguish between FF,IE7,IE6: background:orange;*background:green! important;*background:blue;

IE7,IE8 compatibility:

1. Support for different keywords in several browsers 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 condition notes

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 both of pointer,IE, so use pointer for compatibility

5. When setting the Style attribute of the HTML tag in FireFox, all location, width, height and size values must be followed by px,IE to support this writing, so add px units uniformly. For example, Obj.Style.Height = imgObj.Style.Height + 'px';

6. FireFox cannot parse 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 indentation of lists such as ul, ol, etc., the style should be written as: list-style:none;margin:0px;padding:0px; where the margin attribute is valid for IE and the padding attribute is valid for FireFox

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

9. CSS control fillet: IE: fillet is 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 bump frame: 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 does not support either.

12. IE has bug in which the Select control is always at the top, and all CSS have no effect on the Select control.

13. IE supports Label tags in Form, including images and text content; FireFox does not support Label containing pictures, and clicking on pictures cannot make the Radio or CheckBox marked label for have an effect. 14. TextArea in FireFox does not support onScroll events

15. FireFox does not support inline and block of display

16. FireFox sets margin-left to Div. It is already centered when margin-right is auto, but not in IE.

17. When FireFox sets text-align on Body, Div needs to set margin: auto (mainly margin-left margin-right) to center

18. CSS styling for hyperlinks is best set in this order: L-V-H-A. That is to say, this can avoid some hyperlinks that are visited and will not have hover and active styles.

19. Setting automatic line wrapping for long paragraphs in IE is implemented by using the method of JS insertion in CSS. The specific code is as follows: / * intLen) {strTemp+=strContent.substr (0memintLen) + "; strContent=strContent.substr (intLen,strContent.length);} strTemp+="+ strContent; obj [XSS _ clean] = strTemp;} if (document.getElementById & &! document.all) toBreakWord (" div_id ", 37); / *]] > * /

20. After the floating attribute is added to the child container, the container will not automatically open the solution: add a CSS clear:both; to clear the float in the next tag after the end of the tag

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

twenty-two。 There will be gaps under the image under the IE6: add display:block to the 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 the IE6: set the right div to also float the float:left or define the margin-right:-3px; relative to IE6

24. The display method of ellipsis when the content exceeds the length in LI (only applicable to IE)

25. If the height of the element and the height of the row are set to the same value, the text can be located vertically.

twenty-six。 To align the text with the text input box, you must add the vertical-align:middle; property setting to the CSS

twenty-seven。 Browsers that support the WEB standard will not be stretched out like IE6 if they set a fixed height, but want to set a fixed height and want to be able to be stretched? 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, it can be defined as: {heightmin-height autoimportance; height:200px; min-height:200px;}

twenty-eight。 Web standard IE can not set scroll bar color solution: change the setting of body to html in CSS

twenty-nine。 IE6 cannot define a container about the height of 1px due to the default line height problem. The solution: set the container in CSS, such as: overflow:hidden | zoom:0.08 | line-height:1px

thirty。 Set the transparency property to Flash to make the layer appear on top of Flash

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.