All the ideas in this article come from the Internet and their own practice!
Test environment: IE5/IE7/IE8/IE9/IE10/Edge document mode
(1) The \0 mark was used when it was compatible with IE10 and IE9 when making the login form
Usage scenarios: IE8, IE9, IE10, Edge , IE11 (other information shows that it works)
.name{
color:red;
color:pink\0;//\0紧贴pink,否则IE8失效
}(2) \9 ( <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> may affect the results )
Usage scenarios: IE5, IE7, IE8, IE9, IE10
.name{
color:red;
color:pink\9;
}（3）+
Usage scenario: <=IE7
.name{
color:red;
color:pink\9;
+color:blue;
}（4）_
Usage scenario: IE6
.name{
color:red;
color:pink\9;
_color:blue;
}（5）*
Usage scenarios: IE6, IE7
.name{
color:red;
color:pink\9;
*color:blue;
}Summary: s means Standards Mode means standard mode, Q means Quirks Mode means compatibility mode.
| hack | Example | IE6 (S) | IE6 (Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) |
| * | *color | Y | Y | Y | Y | N | Y |
| + | +color | Y | Y | Y | Y | N | Y |
| - | -color | Y | Y | N | N | N | N |
| _ | _color | Y | Y | N | N | N | N |
| # | #color | Y | Y | Y | Y | N | Y |
| \0 | color:red\0; | N | N | N | N | Y | N |
| \9 | color:red\9; | Y | Y | Y | Y | Y | Y |
（6）!important
| hack | Example | IE6 (S) | IE6 (Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) |
| !important | color:red !important; | N | N | Y | N | Y | N |
(7) Conditional comment statement (IE)
Usage scenario: >IE5 Keywords: gt:> lt:< gte:>= lte:<= !: Other versions
<!--[if IE]>所有IE<![endif]-->
<!--[if IE 7]>IE7<![endif]-->
<!--[if gt IE 9]>大于IE9<![endif]-->
<!--[if lte IE 9]>小于等于IE9<![endif]-->
<!--[if !IE 9]>除了IE9<![endif]-->
(8) mate- unified rendering mode
Usage scenario: X-UA-Compatible is a proprietary meta attribute of IE8, which tells IE8 which version to use to render the page, because when IE8 was first launched, many web pages could not adapt to higher version browsers, so this attribute appeared to force IE8 Render in low version mode;
The following configuration is recommended: IE=edge, use the latest engine to render the page; chrome=1 can activate Chome Frame
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>What is Chome Frame? (Google announced the end of support in January 2014)
Chinese name: Google Chrome Embedded Frame, a free plug-in for Internet Explore launched by Google. Chrome Frame will use the latest version of the chome webkit kernel and Javascript engine to inject into IE, and use chrome's webkit engine to process web pages so that IE supports high-level web technologies.
Compatibility: IE6, IE7, IE8, IE9
Use: Want IE browser to start Chrome Frame to render web pages? Step1 , IE install the Chrome Frame plug-in; step2 , (as a user) registry modification|| (as a developer) add http header meta to the webpage, set chrome=1 to open
（9）@media screen { }
Usage scenario: >=IE9
@media screen {
.name{
color: red;
color:blue\9;//IE9 IE10识别这个
}
}（10）@supports (not (-ms-accelerator:true)){}
Usage scenario: non-IE browser
@supports (not (-ms-accelerator:true)) {
.name{
color:red;
}
}(11) -ms-high-contrast attribute in @media (I haven't used it, and IE10 rarely has compatibility problems)
Usage scenario: IE10 IE10 supports media query, and then also supports the attribute -ms-high-contrast, so use it to hack IE10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
document.documentElement.className += "ie10";
}(12) @cc_on (not used) uses IE's private conditional compilation + conditional comments to propose a hack against IE10
<!--[if !IE]><!--><script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->Note: CSS is parsed from top to bottom, and the ones that are not recognized are ignored. The writing order is: color--->+color--->_color high version to bottom version
reference:
(1) Use \0's CSS Hack with caution
(2) What is CSS hack? Introduction to CSS hack of IE6\7\8\9\10 browser