CSS Hack technical introduction and common hack skill collection

first, what is CSS Hack?

Different browsers have different parsing results for CSS, which will result in different page effects for the same CSS output, which requires CSS hack to solve the browser-local compatibility problem. The process of writing different CSS code for different browsers is called CSS Hack.

CSS hack common in three forms: CSS property hack, css selector hack and IE conditional comment hack, hack mainly for IE browser.

1, attribute-level hack: such as IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but not the underscore "_", and Firefox two are not recognized.

2, selector level hack: such as IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}.

3, IE conditional comment hack:ie conditional comment is a non-standard logic statement provided by Microsoft from IE5. For example, for all ie:<!–[if ie]><!– your code –><! [Endif]–>, for IE6 and the following versions: <!–[if lt IE 7]><!– Your code –><! [Endif]–> This type of hack takes effect not only on CSS, but on all code written in the judgment statement.

PS: Conditional annotations can only be executed under IE, and this code is ignored as annotations under non-ie browsing. Different CSS, JS, HTML, and server code can be loaded via the IE conditional comment.

Second, the commonly used CSS Hack

The code is as follows:
/* CSS Property level hack */
color:red; /* All browsers are recognized */
_color:red; /* Only IE6 recognition */
*color:red; /* IE6, IE7 recognition */
+color:red; /* IE6, IE7 recognition */
*+color:red; /* IE6, IE7 recognition */
[color:red;/* IE6, IE7 recognition */
COLOR:RED9; /* IE6, IE7, IE8, IE9 recognition */
color:red; /* IE8, IE9 recognition */
COLOR:RED9; /* Only IE9 recognition */
color:red; /* Only IE9 recognition */
Color:red!important; /* IE6 does not recognize!important*/
-------------------------------------------------------------
/* CSS selector level hack */
*html #demo {color:red;}/* Only IE6 recognized */
*+html #demo {color:red;}/* Only IE7 recognized */
Body:nth-of-type (1) #demo {color:red;}//ie9+, ff3.5+, Chrome, Safari, Opera can recognize */
Head:first-child+body #demo {color:red;}/* ie7+, FF, Chrome, Safari, Opera can recognize */
: Root #demo {color:red9;}:/* only IE9 recognized */
--------------------------------------------------------------
/* IE conditional comment hack */
<!--[if ie]> here only IE visible <! [endif]-->
<!--[if IE 6]> content is only IE6.0 visible here <! [endif]-->
<!--[if IE 7]> content is only IE7.0 visible here <! [endif]-->
<!--[if! IE 7]> Here the content only IE7 not recognize, the other version can be recognized, of course, in IE5 above. <! [endif]-->
<!--[if GT IE 6]> IE6 above is recognized, IE6 is not recognized <! [endif]-->
<!--[if GTE IE 7]> IE7 and IE7 above are recognized <! [endif]-->
<!--[If Lt IE 7]> is less than IE7 version to be recognized, IE7 is not recognized. <! [endif]-->
<!--[If LTE IE 7]> IE7 and IE7 The following versions are recognized <! [endif]-->
<!--[if! Ie]> Here the content is only non-ie visible <! [endif]--> Iii. IE6 's support for!important

!important is generally used to distinguish between IE6 and Firefox, such as the basic hack method of browser. Because IE6 does not support!important, and Firefox can read!important, it changes the priority of the style. In fact IE6 in some cases, can also know!important.

For example:

The code is as follows:
<style type= "Text/css" >
. demo{
Color:red!important;
Color:green;
}
</style>
<div class= "Demo" >www.jb51.net</div>

The above code in the FF font is red, IE6 the font is green. Explain the existence of IE6 neglect!important.

Take a look again:

The code is as follows:
<style type= "Text/css" >
. demo{color:red!important;}
. demo {Color:green;}
</style>
<div class= "Demo" >www.jb51.net</div>

If IE6 does not recognize!important, the above code. The contents of the demo should be shown in green, but it is not,. The contents of the demo are shown in red, indicating that IE6 recognizes!important.

The difference between the two cases is that when in a selector, using!important to change the style priority, IE6 is not valid, the following style covers the front,!important is completely ignored, the use of!import

IE6 multiple selectors under the four-

The notation for multi-class selectors. For example:

The code is as follows:
#my. c1.c2 {color:red;}
. c1.c2 {color:red;}

These are supported by browsers such as Ie7+/ff/opera/safari.

In IE6, however, the latter class name overrides the previous class name, that is, the above example is IE6 understood as:

The code is as follows:
#my. c2 {color:red;}
. c2 {color:red;}

Similarly:

The code is as follows:
#my. c1.c2.c3 {color:red;}

IE6 understood as #my. c3 {color:red;}

The code is as follows:
. c1.c2.c3 {color:red;}

IE6 understood as. c3 {color:red;}

So when developing a CSS effect with multiple classes, pay attention to the IE6 problem. The best way to do this is not to use the form of a class combination.

CSS Hack technical introduction and common hack skill collection