I just saw the CSS Hack method of IE10 on the Internet and found that IE10 browser Conditional comments are no longer supported, so I used the IE10 browser to access some projects that I had done before, and no exceptions were found. PS: Projects rarely use conditional comments, which are only compatible IE6 Of transparent The PNG images used by IE7+are transparent, so it doesn't matter if IE10 doesn't support conditional annotation.
The following are the three types of CSS Hack of IE10 that I sorted out:
Method 1: Characteristic test: @cc_ on
We can use IE private conditional compilation combined with conditional annotation to provide Hack for IE10, so that IE6~9 browsers do not support it.
<!-- [if !IE]><!--< script> if (/*@cc_on!@*/false) { document.documentElement.className+=' ie10'; } </script><!--<! [endif]-->
Please note/* @ cc_ on ! @*/ The exclamation mark in the middle.
In this way, you can add a class="ie10" to the html element in ie10, and then uninstall the selector for the ie10 style:
.ie10 .example { /* IE10-only styles go here */ }
At present, I don't know @ cc_ The statement "on" may cause some problems when IE11 is released.
Method 2: @media -ms-high-contrast
IE10 supports media query, and then also supports the attribute - ms high contrast. Therefore, we can use it to hack IE10:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10-specific styles go here */ }
This writing method can be adapted to high contrast and default mode. So it can cover all ie10 modes.
Then this method may also take effect in IE 11 later.
Of course, method 2 can also be used together with method 1:
if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) { document.documentElement.className += "ie10"; }
Method 3: @media 0
This method is not perfect because IE9 Media and 0 hacks are also supported.
@media screen and (min-width:0\0) { /* IE9 and IE10 rule sets go here */ }
Of course, the CSS Hack method of IE10 is not only that, but also the method we haven't found. No matter which method, you can use it skillfully.
