Need hack for ie9 only

Question

Is there a hack to target IE9 only? I am facing a problem in IE9 only, other browsers are working fine. I am using \9, but it is effecting IE8 as well.

I don't want to use conditional comments.

There is no other way ?? i dont want to use condition comment — supersaiyan, Sep 06 '12 at 09:09
Possible duplicate of [Target IE9 or IE8 but not both using CSS][1] [1]: http://stackoverflow.com/questions/5852681/target-ie9-or-ie8-but-not-both-using-css — Darshan Thanki, Sep 06 '12 at 09:10
if you do not want to use conditional comments in your project, then the only way to make it work is to learn how to code cross-browser webs without using conditional elements. I mean, there is a plenty of tricks that could resolve the problem in all browsers at once, but it will be the very confusing for you, and many hours wasted. So i suggest you, as @KyleSevenoaks mentioned already, use conditional comments — aspirinemaga, Sep 06 '12 at 09:15

score 21 · Accepted Answer · edited Jan 06 '16 at 12:20

21

You can use this :root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */

edited Jan 06 '16 at 12:20

Shishir Morshed

797
8
21

answered Sep 06 '12 at 09:10

sandeep

91,313
23
137
155

4

the above styling unfortunately also gets triggered in Firefox & Chrome, i found a better solution here: http://mynthon.net/howto/-/webdev/CSS-big-list-of-css-hacks.txt – nerdess Sep 11 '13 at 10:41

Jeff Clayton · Answer 2 · 2017-03-27T12:33:38.290

15

I came up with a media query that does this as well. It specifies only IE9.

@media all and (min-width:0\0) and (min-resolution:.001dpcm)
{
    #div { color:red; }
}

Other ones I have worked out, including a msie 9+ media query are on my github page: https://github.com/jeffclayton/css_hack_testing - most of these I have sent to browserhacks.com for inclusion.

2017 UPDATE: To see it working, I created a live test page here for this and many others I worked on http://browserstrangeness.bitbucket.io/css_hacks.html and MIRROR: http://browserstrangeness.github.io/css_hacks.html

Please be aware it is min-width:0\0 (zero-backslash-zero) when you copy the code to your own site. Not to be confused with min-width:0 (just a single zero) which does not work to differentiate IE9 from other browsers.

edited Mar 27 '17 at 12:33

answered May 27 '14 at 03:51

Jeff Clayton

7,053
1
31
36

This was the only thing that worked for me. It affected only the ie9 browser and made it easy to target multiple selectors easily.I couldn't get it to compile from lesscss, but that's okay :) – Kevin Beal Jun 10 '15 at 17:56
Glad it could help - and you are correct, you have to use the hack as-is, not filter or compile it because it is non standard code (which is why it works). The zero-slash-zero is not allowed by many browsers or compilers. – Jeff Clayton Jun 10 '15 at 21:08
this is coolest hack ever! works with background and doesn't affect ie10 and later. thank you! – Iggy Aug 27 '15 at 13:56
You are very welcome! A ton of research and testing went into it, I am always glad to see my work has been helpful! – Jeff Clayton Aug 27 '15 at 19:58
This is the true answer. It uses a media query and in my opinion its the best answer. – Rickerd Oct 22 '15 at 09:34
You are Hero, its exactly what i was looking for. It is condition for IE9 only. Great hack. @JeffClayton – Milap Apr 16 '18 at 11:16
1

@Milap glad to help, this one was after much research and testing over months of time - was really excited to see it come to be – Jeff Clayton Apr 16 '18 at 14:24

Kyle · Answer 3 · 2013-03-07T19:50:28.607

5

There is another way!

:root #div { background: #fff \0/IE9; }  /* IE9 */

Use the :root psuedo selector. This works because the @media all and (min-width:0) part as been removed in favor of this method in IE9.

Be aware though, that this is not a safe method as it doesn't work on all selectors. The best thing to use is conditional comments, it is the safest, easiest and best way to target different versions of Internet Explorer except IE10 which has dropped the support for conditional comments.

edited Mar 07 '13 at 19:50

answered Sep 06 '12 at 09:10

Kyle

65,599
28
144
152

It targets also IE10. – user712092 Oct 03 '13 at 11:57

score 0 · Answer 4 · answered Jun 15 '15 at 15:16

In my IE9 EMULATOR none of the solutions listed worked. The only hack that properly enabled us to resize, for example, a checkbox in IE9 was:

/* IE9 */
:root input#my-checkbox {
    width:20px !important \ ;
    height:20px !important \ ;
    box-sizing:content-box !important \ ;
}

I don't know if this also affects IE8 or IE10 etc but we have conditionals handing those separately anyway.

Hopefully this helps someone.

Need hack for ie9 only

4 Answers4