How to define specific CSS rules for IE9 alone? [duplicate]

B

7

27

Friends, please help me in defining specific css rule for IE9? For example like this

/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }

Bidget answered 9/9, 2011 at 16:47 Comment(6)

I don't have an answer for you, but you really shouldn't need ie9 specific CSS hacks. It's a compliant browser and should be written for as you would any other. – Unreligious 9/9, 2011 at 16:50

@Grillz :it may be a complaint browser. But we cant tell users to drop IE for this site and download and use another one for this site. – Bidget 30/10, 2011 at 5:54

Compliant. Adjective: Inclined to agree with others or obey rules, esp. to an excessive degree; acquiescent. What I was saying is that IE9 is the same as safari and firefox as development goes. Shouldn't need to target styles at it. The guys below have your answer though, so you should mark one accepted. – Unreligious 2/11, 2011 at 12:20

min-height is not supported in this compliant browser. – Illiteracy 8/2, 2012 at 12:22

A bit late here, but @Gregg stating that IE9 is a compliant browser is a really bold statement. I'd rather fully support the TOs typo ;-) – Knives 28/8, 2018 at 22:21

Thanks @Knives - Once I finish my time machine I'll let 7 years-ago-Gregg know that IE9 is no longer compliant :). Despite my unnecessary snark back then I wish I hadn't had to look at the subsequent rude comments on this question. IE is truly not fun to develop for, but it was a standards compliant browser. All browsers have bugs, but adding browser hacks continues to be a bad practice to this day. – Unreligious 1/9, 2018 at 15:9

L

24

You can prepend the CSS style with

:root

to make it IE9-specific, like this:

:root #element { color:pink \0/IE9; }  /* IE9 */

Lakh answered 9/12, 2011 at 15:25 Comment(3)

Just a note that while this is valid CSS it doesn't work with less.css. – Infanticide 25/9, 2012 at 14:45

Also should note that the most important part is the '\0/IE9' bit. Just adding ':root' at the beginning does not make it IE9-only. Chrome, at least, still picks up ':root'-prefixed selectors. Possibly other browsers also. – Jeth 15/2, 2013 at 17:31

This is not only IE9. It is also IE10 compatible. (which wasn't available when the question was asked) – Lycia 28/2, 2013 at 15:33

N

19

Use IE conditional comments:

<!--[if ie 9]>
    your stuff here
<![endif]-->

Nidanidaros answered 9/9, 2011 at 16:50 Comment(0)

M

8

\9 is a "CSS hack" specific to Internet Explorer.

This simply means that the one specific line of CSS ending with a \9;

In your example, If your CSS looked like this...

html .twit-post .delete_note a 
{ 
background-position-y: 2px\9; 

}
html .twit-post .delete_note a:hover 
{ 
 background-position-y: -14px\9;
 }

The result would be background-position-y: -14px; in IE 9

Meingoldas answered 16/6, 2014 at 11:41 Comment(0)

T

2

I think you can do the same as if you want to write specific code for IE6 but say IE9 instead :)

<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->

Tom answered 9/9, 2011 at 16:50 Comment(0)

C

1

use conditional CSS: (place the code above the <head> on your html, and IE9 will read that extra CSS file)

<!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->

This means the approach is with a new CSS file rather than a hack in the classes, this guarantees the CSS are valid.

Contractual answered 9/9, 2011 at 16:51 Comment(0)

J

0

I found that in some cases using negative values (when using a compiler to compile LESS files) using:

margin-right: -15px\9; /* This fails */
margin-right: ~"-18px\9"; /* This passes */

Javed answered 8/1, 2018 at 12:37 Comment(4)

is it relevant to OP ask? specific css rule for IE9? – Eimile 8/1, 2018 at 13:8

@user7294900, im not sure what you mean. Could you clarify your question please :) – Javed 8/1, 2018 at 13:11

The original question is how to specify css rule for IE9, your answer is irrelevant here – Eimile 8/1, 2018 at 13:12

I found that this technique worked for me, I was trying to write styles specifically for IE9 and the project that im busy with has a is compiling LESS files. So i thought this could help someone looking to try and achieve what I was doing. – Javed 8/1, 2018 at 13:14

M

-6

You shouldn't need to target IE9. It is capable of handling modern css and shouldn't be hacked. This is an outdated method of developing.

Masseur answered 9/9, 2011 at 18:12 Comment(4)

Sure, you should create a CSS standard site first, without any hacks. Then open it in IE9. Sometimes it might be fine. But a lot of the time it won't be, and you'll need to hack it. – Infanticide 25/9, 2012 at 14:27

say this to Microsoft – Leatherman 25/9, 2013 at 13:28

yeah - I have seen bugs that are specific to IE9 - some thing differ between 32bit windows and 64bit windows for IE9 as well. – Douglasdouglashome 23/4, 2014 at 12:42

This would be better as a comment – Lefler 16/2, 2016 at 15:0

Recommended topics

Hot tags