Need hack for ie9 only [duplicate]

Asked 6/9, 2012 at 9:7 Answered 15/6, 2015 at 15:16

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.

Ravenravening answered 6/9, 2012 at 9:7 Comment(6)

Conditional comments might be your only friend here. – Elseelset 6/9, 2012 at 9:8

There is no other way ?? i dont want to use condition comment – Ravenravening 6/9, 2012 at 9:9

Possible duplicate of [Target IE9 or IE8 but not both using CSS][1] [1]: #5853181 – Olgaolguin 6/9, 2012 at 9:10

no its not.Your post is for ie8 and mine is for ie9 – Ravenravening 6/9, 2012 at 9:12

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 – Zolner 6/9, 2012 at 9:15

@SACHIN: not a duplicate, but the answer is right there... – Jew 13/12, 2012 at 23:26

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

Amido answered 6/9, 2012 at 9:10 Comment(1)

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

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.

Specie answered 27/5, 2014 at 3:51 Comment(7)

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 :) – Birdsall 10/6, 2015 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. – Specie 10/6, 2015 at 21:8

this is coolest hack ever! works with background and doesn't affect ie10 and later. thank you! – Strafford 27/8, 2015 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! – Specie 27/8, 2015 at 19:58

This is the true answer. It uses a media query and in my opinion its the best answer. – Eugenides 22/10, 2015 at 9:34

You are Hero, its exactly what i was looking for. It is condition for IE9 only. Great hack. @JeffClayton – Crown 16/4, 2018 at 11:16

@Crown glad to help, this one was after much research and testing over months of time - was really excited to see it come to be – Specie 16/4, 2018 at 14:24

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.

Elseelset answered 6/9, 2012 at 9:10 Comment(1)

It targets also IE10. – Tatar 3/10, 2013 at 11:57

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.

Viridian answered 15/6, 2015 at 15:16 Comment(0)

Recommended topics

Hot tags