Different CSS hack writing methods for different browsers

difference IE6 And FF: background: orange* background:blue;

Distinguish IE6 from IE7: background: green! important; background:blue;

Distinguish IE7 from FF: background: orange;  *background:green;

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

Note: IE can identify *; standard browser (e.g. FF) not identifiable *; IE6 can recognize *, but not! Important, IE7 can recognize *, and can also recognize! important; FF can't recognize *, but it can! important;

In addition, add an underscore "_". IE6 supports underscores, and IE7 and FF do not support underscores. So you can also distinguish IE6, IE7, FF: background: orange* background:green;_ background:blue; Note: No matter what method, FF is written in the front, IE7 is written in the middle, and IE6 is written at the end.

With IE7 on! Important support! The important method is only applicable to the HACK of IE6 (Note the writing method. Remember that the declaration location needs to be in advance.)<style># wrapper {width: 100px! Important;/* IE7+FF */width: 80px;/* IE6 */}</style>

IE6/IE7 vs. FF

1. *+html and * html are IE specific tags, which are not supported by Firefox at the moment, while *+html is IE7 specific tags

<style># wrapper {# wrapper {width: 120px;}/* FireFox */* html # wrapper {width: 80px;}/* ie6 fixed */*+html # wrapper {width: 60px;}/* ie7 fixed, note the order */}</style>

2. Expression:+property: value

Test environment: IE5, IE6, IE7, FF1.5, FF2.0, Opera 9, Safari 2 Test results: IE5, IE6, IE7 browser recognition; FF2.0, Opera 9, Safari 2 browsers do not recognize. Conclusion: We can use "+" to implement CSS Hack only recognized by IE. For example, if we want to achieve the width of 500px in IE, and 480px in other browsers, we can use "+" Hack, as follows: # hack {width: 500px;+width: 480px;/* only IE */}

3. For inline css

##wrapper  {  height:20px;   /*For Firefox*/  *height:25px;  /*For IE7 & IE6*/  _height:20px;  /*For IE6*/}

5. Hack of IE7

>Body html * *+html, of which the first two are illegal CSS writing methods, are ignored in standard compatible browsers, but IE7 does not think so. For the>body, it will replace the missing selectors with global selectors *, that is, it will be treated as *>body, and this phenomenon also exists not only for the>selectors,+,~selectors. For html *, because there is no space between html and *, it is also a CSS syntax error, but IE7 will not ignore it, but mistakenly believes that there is a space. For the third type of *+html, IE7 believes that the DTD declaration in front of the html is also an element, so the html will be selected. Only this one of the three methods is a valid CSS writing method, that is, it can be verified by the verifier, so it is also the hack usage recommended by the author.

6. IE6 is not recognized

html/* */ >body  #box { color: red; }   IE6  typeface Will not turn red

7. Shield IE browser (that is, it is not displayed under IE)

*: lang (zh) select {font: 12px! Important;}/* FF, OP is visible. Special reminder: Due to Opera's recent upgrade, this sentence is only recognized by FF at present */select: empty {font: 12px! Important;}/* safari is visible */here select is a selector, which can be changed according to the situation. The second sentence is unique to Safari browser on MAC.

8. Only IE7 and IE5.0 can be identified

*+Html select {&hellip;} This HACK can be used when you need to style only for IE7 and IE5.0.

9. Only IE7 can recognize

*+Html select {&hellip;! Important;} This HACK can be used when you need to style only for IE7.  

10. Identification of IE6 and below

*Html select {&hellip;} It should be noted that many blogs are written as HACKs of IE6. In fact, IE5. x can also recognize this HACK. Other browsers do not recognize it. Html/* */>body select {&hellip;} is the same as the previous sentence.   

11. Only IE6 is not recognized, shielding IE6

Select {display/* mask IE6 */: none;} Here, a property and value are separated by CSS comments, which precede the colon.

12. Only IE6 and IE5 are not recognized, and IE6 and IE5 are shielded

Select/* */{display/* IE6, IE5 does not recognize */: none;} The difference from the above sentence is that there is an additional CSS comment between the selector and the curly bracket. Unshielded IE5.5

13. Only IE5 is not recognized, shielding IE5

The sentence select/* IE5 does not recognize */{&hellip;} removes the comment in the attribute area in the previous sentence. Only IE5 does not recognize, IE5.5 can recognize.

14. Box model solution

Select {width: IE5. x width; voice family: ""} ""; voice-family:inherit; Width: correct width;} The clearing method of box model is not passed! Important. This should be clear.

15. Box model solution

Select: after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} In Firefox, when all children are floating, the height of the parent cannot completely cover the entire child. In this case, you can use the HACK to clear the floating to define the parent once.

16. Only Opera recognizes

@Media all and (min width: 0px) {select {&hellip;&hellip;}} Make separate settings for Opera browser.

17. IE5. x filter, only IE5. x is visible

@media tty {i{content:"\";/*" "*/}} @import 'ie5win.css'; /* ";}}/* */

18. IE5/MAC filter, generally not needed

@Media all and (min width: 0px) {select {&hellip;&hellip;}} Make separate settings for Opera browser.