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!
[gist id=8394738]
Just pop the above media query in your css and you can now override and adjust CSS just for IE10 and IE 11.
20 Responses
Thank You ! It Saved my time 🙂
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!
Hi Wil, it has solved my problem, but still some issue in ie 10, I m using bootstrap and i want 2 div’s side by side in ie 10.
Brilliant – saved me a ton of work, thank you very much indeed!
Great ! Thanks a ton !
Hey Wil, Thanks for this.
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?
This is amazing! Thank you so much!
Oh my god you saved my life.
Thanks Wil, worked great
Awesome!
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!
I employ a script that tests the version of IE and appends the class name “ie10” or “ie11” to the tag to give an elegant way to target it in CSS. Check it out: http://marxo.me/target-ie-in-css
This is exactly what I needed. Been fighting with this problem for quite some time. Thanks a bunch!
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.
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
Didn’t work for me, why can’t Microsoft just update their browser regularly so they keep up to date with CSS3 and HTML5?
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