Ie10 CSS hack

Source: Internet
Author: User
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...

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.