CSS Hacks for Targeting IE 10 and Above

I previously wrote a post showing how to target specific Internet Explorer (IE) versions using CSS hacks.

So when I came across an CSS rendering issue for a client site which only seemed to happen in IE 10/11 (really!) I thought I’d skip back and see if those hacks would work.

It was a little more challenging than I thought.

There are no specific CSS property hacks that you can add to CSS statements and Microsoft seem to have dropped the conditional comment system in IE 10 and 11.

That was a bit of a pain in the grass.

I had a look around for some solutions, many of which recommended using jQuery or JavaScript to detect the browser type and add it to the html or body class.

Surely there must be a more elegant solution.

Then I found it in media queries.

Seems like IE10 and 11 (only) support the -ms-high-contrast media query.  Excellent!

Just pop the above media query in your css and you can now override and adjust CSS just for IE10 and IE 11.

Was this article helpful?

Keep In Touch


Wil is a dad, WordPress consultant, WordPress developer, business coach and mentor. He co-organizes the WordPress Sydney meetup group and has been on the organising committee for WordCamp Sydney since 2014. He speaks at many special events and contributes to the WordPress open source project. His likes are chillies, craft beer and electrogravitics.

20 thoughts on “CSS Hacks for Targeting IE 10 and Above”

  1. Hi Wil, I’m having a similar issue with my site http://www.reversewinesnob.com. For some people, but not all, IE11 is rendering the Google web font I am using (Rock Salt) for some of my headers and titles as something completely different (and lame). I’m definitely not a programmer however and my site is on Blogger. So, I’m trying to determine if I can use what you laid out above to specify a different font just for IE10 and 11? Any ideas how I might do that? Thanks!

  2. Am I missing something here? 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 responded positively but so did all the other browsers (firefox, chrome, opera, etc.). Have I missed the purpose of this hack? If so, how do I target IE (which renders diferently) and not any other browser which have another set of media-query values?

  3. This is genius, thanks. For some reason IE 11 gets a bit glitchy when using viewport units for CSS transforms, but Firefox and Chrome handle them fine. Problem solved!

  4. This solution rocks! Great to have since IE10+ does not support conditional CSS. One small problem. I still need to target IE9. I think I will do that through conditional and test using Modern.IE as the IE11 browser emulation is not showing me any love. I think it’s probably a good time to get on board with Modernizr.

  5. Reading and testing the query above I thought my problem is solved – but isn’t…
    The problem is : The tag .myclass:target {visibility:visible;} doesn’t function. (visi.. only as example)
    But in Fox it works well. I hate this Fox vs IE profiling combats!
    Is there perhaps another solution? The test website is http://www.letterchip.de/hofladen/index_hofladen.html

  6. Positively Online

    Hi to everyone hope you are having a great day. I have got a html form field display issue when using Internet explorer 11. IE10 has no problems when displaying form fields. All text is where it should be however IE11 displays text out of line and some text has been cut off. Please view my screen shots of this problem, in the hope that someone can help with a solution to this IE problem.

    Screen shot of IE 11 with text misalignment errors https://chris-positivelyonline.tinytake.com/sf/MTAyOTY0XzY4MDkyNQ

    Screen shot of IE 10 with no text mis-alignment errors https://chris-positivelyonline.tinytake.com/sf/MTAyOTY3XzY4MDkyOQThanks Chris

Comments are closed.