Home > Developer > Web Develop

CSS hack ie

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

posted on April 9, 2014 by Fool's Wharf was browsed 25,762 times

Recommended: Nuggets is a high-quality technology community, from ECMAScript 6 to vue.js, performance optimization to open source class library, so you are good at the front-end development of every technology dry. The major application market search "nuggets" can download the app, technical dry in the grasp.

have IE have hack, see IE9 css hack,ie8 css hack; Last colleague said a page IE10 under the problem, IE9 under test, also have the same problem. Tragedy, hurriedly find IE10 hack.

The IE10 CSS Hacks that Google has turned up is more practical. Record for later use.

First, characteristic detection: @cc_on

We can use the IE private conditional compilation (conditional compilation) with conditional comments to provide hack for Ie10: The script inside the IE exclusion condition comment, to ensure that ie6-9 does not recognize it, then it detects the feature named @ cc_on.

    1. <!--[if! ie]><!--><script>
    2. If (/*@[email protected]*/false) {
    3. Document. DocumentElement. ClassName+ =' Ie10 ';
    4. }
    5. </script><!--<![ Endif]-->

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

This allows you to add a class= "Ie10″ to the HTML element in Ie10 and then unload this selector for the Ie10 style:

    1. . ie10 . Example {
    2. / * ie10-only styles go here * /
    3. }

This is in IE10 Standard mode:

This is in IE10,IE8 mode:

After the test to the compatible version of IE, such as IE11,JS code can be changed:

    1. If (/*@[email protected]*/false) {
    2. Document. DocumentElement. ClassName +=' ie ' + document. Documentmode;
    3. }

About Document.documentmode You can view the Documentmode property of IE (ie8+ new).

May be thinking more, in fact, the test preview version of IE11 has not supported the @ cc_on statement, do not know whether the official version will support. But it's a good thing to differentiate IE11. This modifies the code:

  2. <! DOCTYPE html>
  8. <meta CharSet="Utf-8">
  10. <title> Untitled document </title>
  12. <!--[if! ie]><!-->
  14. <script>
  16. //For IE10
  18. if (/*@[email protected]*/false) {
  20. Document. DocumentElement. ClassName + = ' IE ' + document. Documentmode;
  22. }
  24. //For IE11 and non-IE browsers,
  26. //Because the IE11 under the Document.documentmode is 11, so the HTML tag will add Ie11 style class;
  28. //instead of IE, document.documentmode is undefined, so the ieundefined style class is added to the HTML tag.
  30. if (/*@[email protected]*/true) {
  32. Document. DocumentElement. ClassName + = ' IE ' + document. Documentmode;
  34. }
  36. </script>
  38. <!--<! [endif]-->
  40. <style type="Text/css">
  42. . ie10 . TestClass {
  44. Color: Red
  46. }
  48. . ie11 . TestClass {
  50. Color: Blue
  52. }
  54. . ieundefined . TestClass {
  56. Color: Green
  58. }
  60. </style>
  66. <body>
  68. <div>
  70. Test text!
  72. </div>
  74. </body>

which

    1. If (/*@[email protected]*/true) {
    2. Document. DocumentElement. ClassName + = ' IE ' + document. Documentmode;
    3. }

The above code is for IE11 and non-IE browsers because:

    • IE11 under the Document.documentmode is 11, so the HTML tag will add Ie11 style class;
    • Instead of IE, document.documentmode is undefined, so the HTML tag adds ieundefined style classes.

This also distinguishes IE11, IE11 preview version of:

。

Hehe, purely YY,IE11 official version still do not know what look, and in the actual project with the gradual standardization of IE, IE11 and IE10 may rarely use CSS hack.

Second, @media-ms-high-contrast method

IE10 supports media queries and then also supports-ms-high-contrast this property, so we can use it to hack IE10:

    1. @media screen and (-Ms-High-contrast: active), (- Ms-High-contrast: none) {
    2. / * ie10-specific styles go here * /
    3. }

This notation can be adapted to high contrast and default mode. So you can cover all the ie10 patterns. This approach also takes effect in the preview version of IE11.

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

    1. If (window. Matchmedia("screen and (-ms-high-contrast:active), (-ms-high-contrast:none)"). Matches) {
    2. Document. DocumentElement. ClassName + = "Ie10";
    3. }
Iii. methods of @media 0

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

    1. @media screen and (min-width:0) {
    2. / * IE9, IE10, IE11 rule sets go here * /
    3. }

In short, with the gradual standardization of IE, IE11 and IE10 may rarely use CSS hack, do not see, hehe

CSS hack ie

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
ie utf8 ie ssl post ie reinstall ie lenovo ie ie utf useragent ie

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More