Quick query of CSS Hack in IE browser (IE6/0/41/0/41)

What is the principle of CSS Hack?

Because different browsers have different support for CSS and parse results, they also have a relationship with the priority of CSS. We can write different CSS for different browsers based on this.

CSS Hack has three forms: CSS internal Hack, selector Hack, and HTML header reference (if IE) Hack. CSS Hack is mainly used for IE browsers.

Internal Hack: for example, IE6 can recognize underscores (_) and star numbers (*). IE7 can recognize asterisks (*) but cannot recognize underscores "_", firefox does not know either of them. And so on.

Selector Hack: for example, IE6 can recognize * html. class {}, IE7 can recognize * + html. class {}, or *: first-child + html. class {}. And so on.

HTML header reference (if IE) Hack: for all IE: <! -[If IE]> <! -Your code-> <! [Endif]-> for IE6 and earlier versions: <! -[If lt IE 7]> <! -Your code-> <! [Endif]-> this type of Hack not only takes effect for CSS, but also for all code written in the judgment statement.

The writing order is generally to write the CSS of a browser with strong recognition ability behind. The following describes how to write more details.

How to write CSS Hack
For example, to distinguish IE6 from firefox, you can write as follows:

The code is as follows:	Copy code
<Style> Div { Background: green;/* for firefox */ * Background: red;/* for IE6 */ } </Style>

I saw red in IE6 and green in firefox.

IE6 CSS Hack

IE6 CSS Hack only

The code is as follows:

Copy code

/* For IE6 and earlier */ * Html. demo {color: #090 ;} . Demo {_ color: #090;} other IE6 CSS Hack . Demo {* color: #090;/* For IE7 -*/} . Demo {+ color: #090;/* For IE7 -*/} . Demo {# color: #090;/* For IE7 -*/} . Demo {> color: #090;/* For IE7 -*/} . Demo {. color: #090;/* For IE7 -*/} . Demo {color: #0909;/* For IE6 + */} . Demo {[; color: # f00;];/* For IE7-and webkit */} . Demo {color: #0909;/* All IE */}

IE7 CSS Hack

The code is as follows:	Copy code
IE7 CSS Hack only * + Html. test {color: # ff0;}/* For IE7 */other IE7 CSS Hack . Demo {* color: #090;/* For IE7 -*/} . Demo {+ color: #090;/* For IE7 -*/} . Demo {# color: #090;/* For IE7 -*/} . Demo {> color: #090;/* For IE7 -*/} . Demo {. color: #090;/* For IE7 -*/} . Demo {color: #0909;/* For IE6 + */} . Demo {[; color: # f00;];/* For IE7-and webkit */} . Demo {color: #0909;/* All IE */}

IE8 CSS Hack

The code is as follows:	Copy code
IE8 CSS Hack only . Demo {color: # 09F/}/* For IE8 */other IE8 CSS Hack . Demo {color: # 09F;/* IE8 + */} . Demo {color: #0909;/* All IE */}

IE9 CSS Hack

IE9 CSS Hack only
No CSS Hack can be recognized only by IE9. The "IE9 CSS Hack only" circulating on the Internet has expired with the emergence of IE10 and IE11.

The code is as follows:	Copy code
Other IE9 CSS Hack . Demo {color: blue9;}/* IE9 + */ . Demo {color: # 09F;/* IE8 + */} . Demo {color: #0909;/* All IE */} @ Media screen and (min-width: 0 ){ . Demo {color: blue;}/* IE9, IE10, IE11 rule sets go here */ }

IE10 CSS Hack
IE10 CSS Hack only

None

The code is as follows:	Copy code
Other IE10 CSS Hack . Demo {color: blue9;}/* IE9 + */ . Demo {color: # 09F;/* IE8 + */} . Demo {color: #0909;/* All IE */} @ Media screen and (min-width: 0 ){ . Demo {color: blue;}/* IE9, IE10, IE11 rule sets go here */ } @ Media screen and (-ms-high-contrast: active), (-ms-high-contrast: none ){ . Demo {color: blue;}/* IE10-specific styles go here */ }

In summary, with the gradual standardization of IE, IE11 and IE10 may seldom use CSS Hack.