CSS Hack technology Introduction and common hack skill collection

One, what is CSS Hack?

Different browsers for CSS parsing results are different, resulting in the same CSS output page effect is different, 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 properties hack, css selector hack and ie conditional annotation hack, hack mainly for IE browser.

1, attribute-level hack: For example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but do not recognize the underscore "_", and Firefox two can not know.

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

3, ie condition annotation hack:ie condition annotation is a non-standard logic statement that Microsoft has provided from IE5 beginning. For example, ie]><!– your code for all ie:<!–[if –><! [Endif]–>, for IE6 and the following version: <!–[if lt IE 7]><!– Your code –><! [Endif]–>, this kind of hack not only takes effect on CSS, but all the code written in the judgment statement will take effect.

PS: Conditional annotations can only be performed under IE browser, which is ignored as annotations in non IE browsing. You can load different CSS, JS, HTML, and server code through the IE conditional annotation.

Second, the commonly used CSS Hack

The

code is as follows:


/* CSS property level hack/


color:red; * * All browsers can be recognized/


_color:red; /* Only IE6 identification */


*color:red; /* IE6, IE7 identification * *


+color:red; /* IE6, IE7 identification * *


*+color:red; /* IE6, IE7 identification * *


[color:red///* IE6, IE7 identification * *


color:red9; /* IE6, IE7, IE8, IE9 identification * *


color:red; /* IE8, IE9 identification * *


color:red9; /* 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 recognition/


*+html #demo {color:red}/* only IE7 recognition/


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


--------------------------------------------------------------


/* IE condition annotation hack * *


&lt;!--[if ie]&gt; here only IE visible &lt;! [endif]--&gt;


&lt;!--[if IE 6]&gt; the contents are only IE6.0 visible &lt;! [endif]--&gt;


&lt;!--[if IE 7]&gt; the contents are only IE7.0 visible &lt;! [endif]--&gt;


&lt;!--[if! IE 7]&gt; here only IE7 can not be recognized, the other version can be recognized, of course, in IE5 above. &lt;! [endif]--&gt;


&lt;!--[if GT IE 6]&gt; IE6 version is recognizable, IE6 unrecognized &lt;! [endif]--&gt;


&lt;!--[if GTE IE 7]&gt; IE7 and IE7 above can be identified &lt;! [endif]--&gt;


&lt;!--[if Lt IE 7]&gt; is below IE7 version to be recognized, IE7 unrecognized. &lt;! [endif]--&gt;


&lt;!--[if LTE IE 7]&gt; IE7 and IE7 The following versions can be identified &lt;! [endif]--&gt;


&lt;!--[if! Ie]&gt; Here the content is only non ie visible &lt;! [endif]--&gt;

Iii. IE6 support for the!important

!important is generally used to make a distinction between IE6 and Firefox and other browsers basic hack techniques. 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:


&lt;style type= "Text/css" &gt;


. demo{


color:red!important;


Color:green;


}


&lt;/style&gt;


&lt;div class= "Demo" &gt;www.jb51.net&lt;/div&gt;

The above code in FF under the font is red, IE6 under the font is green. It shows that IE6 ignores the existence of!important.

Take another look:

The

code is as follows:


&lt;style type= "Text/css" &gt;


. demo{color:red!important;


. Demo {Color:green}


&lt;/style&gt;


&lt;div class= "Demo" &gt;www.jb51.net&lt;/div&gt;

If IE6 does not recognize!important, the above code. The content of the demo should be shown as green, but it is not,. The content of the demo is shown in red, which shows that IE6 is!important.

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

Four, IE6 under the multi-selector

The writing of multiple-class selectors. For example:

The

code is as follows:


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


. c1.c2 {color:red;}

The above wording in Ie7+/ff/opera/safari and other browsers are supported.

In IE6, however, the last class name overwrites the previous class name, that is, the previous example is understood by IE6 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;}

Therefore, the development of multiple classes to combine the implementation of CSS effects, pay attention to the problem of IE6. The best way is not to use the form of class composition.