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.

65 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 */
      .ufo_movie-arrw {

    • 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

    • This following code didn’t work on IE 11.

      Test media for IE11

      @media screen and ((-ms-high-contrast: none), (-ms-high-contrast: active)) and (min-width: 1024px){
      .my-ie-class {
      @media screen and ((-ms-high-contrast: none), (-ms-high-contrast: active)) and (min-width: 1920px){
      .my-ie-class {

      This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text.

  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?


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


  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.

  16. Nice! Thanks for this! 🙂
    I had to fix fliplinks that don’t work in IE except Edge, without disrupting other browsers. Works great thanks!

    // Fix for IE11 and 10 (Edge works well):
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .flip-container:hover .flipper, .flip-container.hover .flipper {
    .flip-container:hover .back {.transform(translateZ(1px)); z-index: 999}

  17. Pingback: Content over an image with a blur effect | Base16 Solutions

  18. Hi Philip
    You’re a legend! This worked perfectly for me targeting IE11, and has bought me some time to figure out the broader issues while an internal site is being presented.
    I’m having issues with Flex and getting IE11 to handle the styling correctly for responsive design. So frustrating since it works on every other browser, apart from the critical one for work.
    Thank you!

  19. Pingback: CSS hacks to target latest IE 11 and Edge versions. | Base16 Solutions

  20. Hi Philip,

    I need a little help. I need to write media query which is only work for IE browser, and 1600 screen

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-width: 1600px) {
    .trim_bottom {
    height: 75px;
    this is not working, appreciate your support

  21. If you also want to use min/max with this then they have to go before the IE specific part, like this:

    @media all and (min-width: 768px) and (max-width: 991px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    .test {


  22. How to do if Internet Explorer else Other Browser?

    You show the if part.

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* This is the if */

    /* What magical incantation do I use for all other browsers? */

    I need to hide an element only for Internet Explorer.

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .hidden_for_ie_visable_for_others {
    visibility: hidden;

    /* Magical incantation */ {
    .hidden_for_ie_visable_for_others {
    visibility: visible;

    • This is what I ended up doing.

      /* Define the hidden-for-ie-visible-for-others class for old
      versions of Interner Explorer. */
      .hidden-for-ie-visible-for-others {
      /* Define the hidden-for-ie-visible-for-others class for
      Interner Explorer 10 and Interner Explorer 11. */
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .hidden-for-ie-visible-for-others {
      display:none !important;
      /* Define the hidden-for-ie-visible-for-others class for
      other modern browsers. */
      @supports not (-ms-high-contrast: none) {
      .hidden-for-ie-visible-for-others {
      display:block !important;

      I ended up writing my own article on the subject, [How to Selectively Hide or Display Elements Based on the Web Browser Using CSS](

  23. Philip Newcomer – As someone else previously commented on this post, you sir indeed are a gentleman and a scholar 🙂 – So here I am close to the end of 2019, several years after your initial post – but this obviously is a gift that keeps on giving … I was having issues exclusively with IE Explorer with items that worked just fine in other browsers. Your suggested fix worked like a charm … Excellent my friend, excellent!

Leave a Reply

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