A collection of commonly used CSS hack technology

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 IE7 the following version: <!–[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

/* CSS attribute level hack */color:red;    /* All browsers can recognize */_color:red;     /*  only IE6 identification */*color:red;  /* IE6, IE7 identify */+color:red;  /* IE6, IE7 identify */*+color:red;  /* IE6, IE7 identify */[color:red;  /* IE6, IE7 identify */color:red\9;    /* IE6, IE7, IE8, IE9 identify */color:red\0;    /* IE8, IE9 identify */color:red\9\0;    /* only IE9 identification */color:red; /* only IE9 identification */color:red!important; /* IE6 does not recognize!important*/

-------------------------------------------------------------/* CSS selector level hack */*   HTML #demo {color:red;}  /* Only IE6 identify */*+html #demo {color:red;} /* Only IE7 recognize */body:nth-of-type (1) #demo {color:red;}/* ie9+, ff3.5+, Chrome, Safari, Opera can identify */head:first-child+body #dem o {color:red;}/* ie7+, FF, Chrome, Safari, Opera can recognize */:root #demo {color:red\9;}:/* only IE9 recognition */------------------------ --------------------------------------/* IE condition comment hack */<!--[if ie]> here only ie visible <! [endif]--> <!--[if IE 6]> this content is only IE6.0 visible <! [endif]--> <!--[if IE 7]> this content is only IE7.0 visible <! [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 recognizable, IE6 unrecognized <! [endif]--><!--[if GTE IE 7]> IE7 and IE7 versions are recognized <! [endif]--><!--[If Lt IE 7]> is less than IE7 version to be recognized, IE7 unrecognized. <! [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:

<style type= "Text/css" >.demo{color:red!important;color:green;} </style><div class= "Demo" >

Www.ido321.com

</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:

<style type= "Text/css" >. demo{color:red!important;}. demo {color:green;} </style> <div class= "Demo" ;

Www.ido321.com

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:

#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:

#my. c2 {color:red;}
. c2 {color:red;}

Similarly:

#my. c1.c2.c3 {color:red;}
IE6 understood as #my. c3 {color:red;}
. 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.

A collection of commonly used CSS hack technology