CSS hack collection 2

Preface

Every time you need to find something, you have to go through some of the items you have collected. It takes so much time every time. In addition, sometimes it takes a long time to store it and you forget where it existed, to facilitate query and reading, I decidedCSSCollect hack...

1. CSS hack for different browsers:

Difference between IE6 and FF: Background: orange; * Background: Blue; Difference between IE6 and IE7: Background: Green! Important; Background: Blue; Difference IE7 and FF: Background: orange; * Background: green; Difference ff, IE7, IE6: Background: orange; * Background: Green! Important; * Background: Blue; Note: IE can recognize *; standard browsers (such as ff) cannot recognize *; IE6 can recognize *, but cannot recognize! Important and IE7 can recognize * and also! Important; FF cannot recognize *, but can recognize it! Important;

	IE6	IE7	FF
*	√	√	×
! Important	×	√	√

In addition, the underscore "_", IE6 supports underlines, and IE7 and FF do not support underlines.
So you can also distinguish IE6, IE7, FF: Background: orange; * Background: green; _ Background: blue;
Note: no matter whatMethodThe writing order isFFBefore,IE7In the middle,IE6.

 

2 .! Important

With IE7! Important Support ,! The important method is only applicable to the hack of IE6. (note the writing method. Remember to declare the position in advance.) <style> # wrapper {width: 100px! Important;/* IE7 + FF */width: 80px;/* IE6 */} </style>

3. IE6/IE7 to FF

1.* + HTML and * HTML are unique tags of IE, which are not supported by Firefox at the moment. * + HTML is a unique tag of IE7. <style> # wrapper {width: 120px;}/* Firefox */* html # wrapper {width: 80px ;} /* IE6 fixed */* + html # wrapper {width: 60px;}/* IE7 fixed, pay attention to the sequence */} </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 and Safari 2 are not recognized. Conclusion: We can use "+" to Implement CSS hack only recognized by IE. For example, if we want to implement the 500px width in IE, And the 480px width in other browsers, we can do it through "+" hack, as shown below: # hack {width: 500px; + width: 480px;/* Only ie */}3.Used for inline CSS # wrapper {Height: 20px;/* For Firefox */* Height: 25px;/* For IE7 & IE6 */_ Height: 20px; /* For IE6 */}5.Internet Explorer 7's hack> bodyhtml ** + HTML, the first two of which are invalid CSS statements and are ignored in standard compatible browsers, but IE7 does not think so. For> body, it will replace the missing selector with the global selector *, that is, it will be processed as *> body, and not only for> selector, + ,~ This phenomenon also exists in the selector. For HTML *, because there is no space between HTML and *, it is also a CSS syntax error, but IE7 does not ignore it, but mistakenly considers there is a space here. For the third type of * + HTML, IE7 considers that the DTD declaration before HTML is also an element, so HTML will be selected. Among the three methods, only this method is legal CSS writing, that is to say, it can be verified by the validator, so it is also the hack usage recommended by the author.6.IE6 cannot recognize html/**/> body # box {color: red ;}The IE6 font will not change to red.7.Shield ie browsers (that is, do not display IE) *: Lang (zh) Select {Font: 12px! Important;}/* ff, OP visible. Note: Due to the recent upgrade of opera, this sentence is only recognized by FF */select: Empty {Font: 12px! Important;}/* safari visible */here select is the selector, which can be changed as needed. The second sentence is unique to the Safari browser on Mac.8.Only IE7 and ie5.0 can recognize * + HTML select {...} This hack can be used only for IE7 and ie5.0.9.Only IE7 can recognize * + HTML select {...! Important;} this hack can be used when you only need to style IE7.10.Identification of * HTML select {…} under IE6 and IE6 {...} Note that many blogs have written the hack of IE6. In fact, ie5.x can also identify this hack. Not recognized by other browsers. Html/**/> body select {...} This sentence serves the same purpose as the previous one.11.Only IE6 is not recognized, and ie6select {display/* is blocked. IE6 */: none;} Here, an attribute and value are separated by CSS annotations, and comments are placed before the colon.12.Only IE6 and ie5 are not recognized. IE6 and ie5select/**/{display/* IE6 are blocked. ie5 is not recognized */: none ;} the difference here is that a CSS comment is added between the separator and curly braces. Ie5.5 is not blocked13.Only ie5 is not recognized, and ie5select/* ie5 is not recognized */{...} This sentence removes the comment of the attribute area from the previous sentence. Only ie5 is not recognized, and ie5.5 is recognizable.14.Box Model Solution select {width: ie5.x width; voice-family: "/"}/"; voice-family: Inherit; width: correct width ;} the box model clearing method is not passed! Important. This should be clear.15.Solution to the box model: select: After {content :". "; display: block; Height: 0; clear: Both; visibility: hidden;} in Firefox, when the sub-level is floating, then, the height of the parent level cannot fully cover the entire child level. Then, we can use this floating hack to define the parent level.16.Only opera recognizes @ media all and (min-width: 0px) {select {......} } Separately set operabrowser.17.Ie5.x filter, only visible in ie5.x @ media tty {I {content: "/";/* "*/}}@ import 'ie5win.css ';/*";}} /**/18.Ie5/MAC filters, generally do not need @ media all and (min-width: 0px) {select {......} } Separately set operabrowser