IE10 and IE11 CSS Hack

IE10 and IE11 CSS Hack

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 on ie versions, and some were not sure whether it was a bug caused by ie10. Therefore, inertial thinking allows us to look for CSS Hack for IE10 again.

First, ie10 does not support conditional comments. Frontend UI sharing

I. Feature Detection: @ cc_on

We can provide Hack for ie10 With conditional compilation in combination with conditional comments to ensure that the IE6-9 does not recognize it, then its function detects the name @ cc_on.

The IE10 CSS Hacks on google is quite practical. Record for future use.

12345

<script>if (/*@cc_on!@*/false) { document.documentElement.className+=' ie10';}</script>

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 */}

This is in ie10 standard mode: frontend UI sharing

This is in ie10 or IE8 mode:

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	if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) { document.documentElement.className += "ie10";}

This method can be adapted to the high contrast mode and the default mode, so it can overwrite all ie10 modes, and then this method may take effect in later IE11.

Of course, method 2 can also be used one by one with the method: front-end UI sharing

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...

3. @ media 0 Method

This method is not perfect, because IE9 and the preview version of IE11 also support media and \ 0 hack.

123	@media screen and (min-width:0\0) { /* IE9 , IE10 ,IE11 rule sets go here */}

Summary:

I don't want to write hack to ie. Well, I don't want to write more code for ie...