How to Target Internet Explorer 10 and 11 in CSS

I have not found that Internet Explorer 10 and 11 give me much trouble from a CSS perspective. For the most part, if I write proper, standards-compliant CSS, IE10 and 11 will render the page just fine. However, there are still a few areas where IE10 and 11 need special treatment.

In IE9 and lower, you could use conditional comments to load an IE-specific stylesheet for any version (or combination of versions) that you wanted to specifically target. However, beginning in version 10, conditional comments are no longer supported in IE. I suppose Microsoft thinks their browser is now standards-compliant enough that developers won’t need to target IE specifically, and for the most part that’s true. But for the few remaining cases when IE 10 and 11-specific CSS is required, there are still a few ways to target those browsers specifically:

  1. Detect the browser version server-side based on the user agent, and output an IE-specific CSS class to the “ tag. Use that body class to target only IE in your CSS.
  2. Detect the browser version client-side using JavaScript, adding an IE-specific CSS class to the “ tag. Use that body class to target only IE in your CSS.
  3. Use a malformed media query to exploit a bug in IE’s media query parser so that only IE will parse the code, while other browsers ignore it. Place your IE-specific CSS inside that malformed media query.
  4. Use a properly formed, but Microsoft-specific media query. Place your IE-specific CSS inside that media query.

Here are my thoughts on each of these options:

I don’t like option 1, because it’s not compatible with server-side caching, and browser sniffing is unreliable for other reasons as well.

I don’t like option 2, because the user may have JavaScript disabled.

I don’t like option 3, because it’s possible that Microsoft would fix the parsing bug, which would render this method ineffective. In addition, it’s malformed code. I’ve never liked CSS “hacks” which rely on writing invalid code.

Option 4, while still a bit ugly, is in my opinion the best option, because it’s just plain, valid CSS, but it uses a Microsoft-specific media query, with the effect that only IE will parse it. It doesn’t rely on IE conditional comments, so it works in IE10+. It doesn’t rely on server-side operations, so it works with server-side caching enabled. It doesn’t rely on browser sniffing, so it’s reliable from that perspective. It doesn’t rely on JavaScript, so it works even if JavaScript is disabled. It doesn’t rely on invalid code which exploits a browser parsing bug, so it’s standards-compliant, and won’t be rendered obsolete if Microsoft fixes the bug which made it possible.

Here’s the technique, which is really rather simple: create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.

-ms-high-contrast supports two values: none and active. So to target IE10+ regardless of the property’s setting, use this media query:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

I’m using both of the valid values of the media query, so it will be parsed whether the user has high contrast enabled or not.

Note that this technique will detect both IE10 and IE11. I have found that for my purposes, IE10 behaves exactly like IE11, so I have not needed to target IE10 or IE11 individually.

Also keep in mind that this media query was added in Internet Explorer version 10, so this will only affect IE version 10 and up. If you still need to support IE9 and lower, you can use IE conditional comments.

44 thoughts on “How to Target Internet Explorer 10 and 11 in CSS

  1. If you wish to target IE10 by itself, you can use the ie slash-9 property hack in conjunction with it.

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .selector { property:value\9; } }

  2. It took a lot of time but I did find a way to get IE9 to work… (you won’t see these anywhere, these I created and tested.) I hope you like them.

    Here is one for IE9 and newer:

    @media screen and (min-width:0) and (min-resolution: +72dpi) { .selector { property:value; } }

    Here is one for IE9 alone:

    @media screen and (min-width:0) and (min-resolution: .001dpcm) { .selector { property:value; } }

    • Hi, I am having difficulty with this. I listed the above in my existing media-query file and created a separate linked IE specific media-query file both with the same results. Each time IE (11) responded positively but so did all the other browsers (firefox, chrome, opera, etc.).
      Aren’t other browsers meant to ignore the query?

      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (max-width: 1920px) {
      #movies { /* Holds Movie Window Content5 */
      height:10%;
      }
      .ufo_movie-arrw {
      height:26.5em;
      }
      }

    • Both @media screen and (min-width:0) and (min-resolution: +72dpi) and @media screen and (min-width:0) and (min-resolution: .001dpcm) ARE recognized by Firefox 39

  3. It is the comma that is causing it to respond to all browsers here=> , (max-width: 1920px). Try removing it and replacing it with ‘and’ to get ie to respond. The comma means ‘OR’.

  4. You should encapsulate the original ‘or’ in parenthesis before you do like so:

    ((-ms-high-contrast: active), (-ms-high-contrast: none)) and [your added 1920 clause]

    This should give you better results

  5. I have been working on underscore hacks for some time now. Here are a few you might find interesting. They are ‘hacky’ but they work because of browser support for new ie pseudo-elements/classes:

    /* Internet Explorer 11+ */
    _:-ms-fullscreen, :root .ie11up { property:value; }

    /* Internet Explorer 10+ */
    _:-ms-lang(x), .ie10up { property:value; }

    /* Internet Explorer 10 (only) */
    _:-ms-lang(x), .ie10 { property:value\9; }

  6. Pingback: Week 2 | Blog

  7. thanks, i was looking to apply a couple rules to fix ie’s bad behavior with img tags inside label tags, which caused undesirable display issues in other browsers when present. i left out the all and and just went with @media (-ms-high-contrast: none), (-ms-high-contrast: active) and everybody’s happy. i tried conditional comments first — hadn’t noticed ie dropped support for that with ie10. thankfully the reason i hadn’t noticed is this is actually the first ie issue i’ve run into since then (besides the gap between adjacent boxes’ backgrounds).

  8. Pingback: Week 18: | Natt

  9. Philip, Your solution for ms specific css using @media… as noted above in the content, was spot on awesome! IE 11 was displaying some content 4px’s higher than FF and Chrome. Used your snippet to make the margin adjustment targeting IE specifically and it worked beautifully! Thanks much for figuring this out!

  10. You sir are a gentleman and a scholar!
    I was having major issues with IE10+ displaying a div with a fixed position very weirdly.
    If I set the position to absolute instead of fixed, it worked perfectly in IE, however this caused it to f##k up in all other browsers.
    This little tweak fixed it immediately!

  11. Works great. And thanks. I also found one documented elsewhere, “min-width:0\0”. FWIW, neither that one nor yours passes muster in the W3C’s CSS parser. But then, the W3C doesn’t always walk the walk.

  12. Can you target only specified classes within such a media query?

    Ex:

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .myclass {padding-top: 100vh}
    }

    I’m needing a specific class to adjust padding ONLY in IE, to compensate for vertical centering on that class that works in other browsers, but not in IE.

    Thanks!
    Erik

    • Yes, a media query is a sort of “container” that you can put any of your regular CSS rules inside of. So your example should work just fine. In fact, media queries will not work inside of a declaration block, you need to put your rules inside the media query. Unless, of course, you’re using a CSS pre-processor that will allow you to have media queries inside of your blocks.

  13. Thank you for posting this! It works great in IE10/11, but not working for me in Windows 8 and 10. Is there another solution for Windows 8 and Windows 10?

  14. This does seem to work, however I am not able to put another media query inside of the ms specific one (I only need certain IE 11 styles at a certain screen size). Is there any way around this?

    • You can’t nest media queries in vanilla CSS. If you’re not using a preprocessor that allows nested queries, you’ll need combine your own additional media queries with the IE-detection media queries.

  15. I think I love you.
    I was struggling with an overflow problem while using ReportViewer for .net, because with
    overflow: auto;
    I had a double scrollbar in webkit and correct scrollbar in IE, while with:
    overflow: hidden;
    I had one scrollbar in webkit and none in explorer.

    Method 4 to write one different line of css for explorer did the trick wonderfully.

    Pure joy.

Leave a Reply

Your email address will not be published. Required fields are marked *