Ie10 CSS hack

ArticleDirectory

• Method 1: Feature Detection: @ cc_on
• Method 2: @ media-MS-high-contrast
• Method 3: @ media 0
• Summary:

Organized from: http://www.impressivewebs.com/ie10-css-hacks/

Original Chinese Text: ie10 CSS hack, please respect copyright, repost, please indicate the source, thank you ~~

It is said that Windows 8 has sold more than 40 million copies in just a few days since its launch. Then we found that many pages in the project were abnormal in ie10. Some were previously caused by hack for IE versions, and some were not sure whether it was a bug caused by ie10. Therefore, inertial thinking allows us to find CSS hack for ie10 again...

First, ie10 does not support conditional comments.

Method 1: Feature Detection: @ cc_on

We can use the Conditional compilation of IE to provide hack for ie10 with conditional Annotations:

12345

<! -- [If! IE]> <! -- <SCRIPT>If (/* @ cc_on! @ */False ){Document.doc umentelement. classname + = 'ie10 ';}</SCRIPT> <! -- <! [Endif] -->

Please note/* @ cc_on! @ */The exclamation point in the middle.

In this way, you can add a class = "ie10" to the HTML element in ie10, and then Uninstall this selector for the ie10 style:

123	. Ie10 . Example {/* IE10-only styles go here */}

Conditional compilation supports all versions of IE browsers, but not other browsers. However, it is very likely that this method will become ineffective after ie11 is released...

Note that Conditional compilation does not support use in Windows Store apps, but only in IE browsers.

Of course, we can also use the traditional method of using UA to add class to HTML elements in ie10.

Method 2: @ media-MS-high-contrast

Ie10 supports media queries and the-MS-high-contrast attribute. Therefore, we can use it to hack ie10:

123	@ Media screen and (-MS-high-contrast: active), (-MS-high-contrast: None ){/* IE10-specific styles go here */}

This method can be adapted to high contrast and default mode. So we can overwrite all ie10 models.

This method may also take effect in later ie11.

Of course, method 2 can also be used one by one with method:

123	If (Window.Matchmedia("Screen and (-MS-high-contrast: active), (-MS-high-contrast: None )").Matches) {Document.Documentelement.Classname + = "Ie10";}

Method 3: @ media 0

This is abnormal and not perfect, because ie9 also supports media and \ 0 hack:

123	@ Media screen and (min-width: 0 \ 0 ){/* Ie9 and ie10 rule sets go here */}

However, it is estimated that ie10 will also become popular on the Windows 7 platform, so ie9 will disappear, just look at the shares of IE8 and IE7. This may not happen...

Summary:

I don't want to write hack to IE. Well, I don't want to write more for IE.Code...