How can I set CSS only for specific IE browsers?

Question

I have a CSS/jQuery Checkbox style script: http://jsfiddle.net/BwaCD/

The problem is, in current browsers in order for the span to float over the input, the input's position must be absolute. But in IE8 & below, the script will not work and therefore I'm left with and absolutely positioned input that is just floating over other elements. I am not asking for the script to work in IE8 & below.

I want to know how I can use CSS to set a specific style if it is IE8 and below. I guess jQuery would be acceptable if it's necessary, but I don't think it is. I know this can be done with just CSS & HTML I just don't know how.

Brilliand · Accepted Answer · 2013-05-17 22:06:19Z

16

Conditional comments would work (), but if you want to do it all in the stylesheet, there is a way:

body {  
    color: red; /* all browsers, of course */  
    color: green\9; /* IE only */  
}

The important thing here is the "\9", which has to be exactly "\9". I'm not clear on exactly why this is.

EDIT: The \9 hack isn't enough by itself. To exclude IE9, you also need the :root hack:

:root body {
    color: red\9; /* IE9 only */  
}

Other browsers besides IE might support :root, so combine it with the \9 hack if you're using it to target IE9.

edited May 17, 2013 at 22:06

answered Jan 15, 2012 at 23:34

Brilliand

13.8k6 gold badges49 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brilliand Over a year ago

Looks like the \9 actually targets all versions of IE, not just 8 and below. mathiasbynens.be/notes/safe-css-hacks#css-hacks

f055 Over a year ago

\9 works great, and since MS dropped conditional comments starting IE10, this seems the only js-free solution for target IE only. Thanks!

Jon Over a year ago

This is the answer. not sure what the other answers are doing here

ViRuSTriNiTy Over a year ago

To target IE 11 you need to use \0 and for others searching for a LESS solution: color: e("green\0");

Adaz · Accepted Answer · 2012-01-15 23:27:43Z

10

How about that?

http://www.quirksmode.org/css/condcom.html

Or that if you don't like those statements

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

answered Jan 15, 2012 at 23:27

Adaz

1,66512 silver badges14 bronze badges

2 Comments

chest_nut Over a year ago

Wow. Thanks. I just wanna ask though, are these hacks safe at all?

Adaz Over a year ago

Hack are bad, always! I suggest using the solution from my first link but if you really must use hacks, I found this website: browserhacks.com - good to know that these things exist and they do work as desired but you really shouldn't use it.

Peter O. · Accepted Answer · 2020-08-29 03:50:42Z

EDIT (Aug. 28): Note that the following answer is relevant, in practice, only for Internet Explorer, at least versions 8 and earlier. To my knowledge, no mainstream browser now supports conditional comments, not even Internet Explorer 11.

You can use Internet Explorer's conditional comments to add a class name to the HTML root tag for older IE browsers:

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

Then you can define IE-specific CSS by referencing the appropriate class name, like this:

.ie8 body {
   /* Will apply only to IE8 */
}

Source: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Lucky · Accepted Answer · 2013-08-14 07:43:28Z

Target ALL VERSIONS of IE :

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Student · Accepted Answer · 2015-10-15 14:57:31Z

2

http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575

on the example: color : green\9;

\9 didn't work for ie11, but \0 worked!

answered Oct 15, 2015 at 14:57

Student

28.6k70 gold badges168 silver badges268 bronze badges

Comments

marxo · Accepted Answer · 2014-10-12 17:01:09Z

1

I have a useful solution for IE 10 and 11. The script checks for IE and version and then appends .ie10 or .ie11 class to the tag.

That way you can write specific rules like .ie10 .something {} and they get applied only when the browser is IE 10 or 11.

Check it out, it's useful for graceful degradation, tested on a few commercial sites and not really hacky: http://marxo.me/target-ie-in-css

answered Oct 12, 2014 at 17:01

marxo

691 gold badge1 silver badge7 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:58:59Z

I solved in this way for the grab cursor in Internet Explorer:

.grab_cursor {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
    cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */
    *cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
    _cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}

In Internet Explorer for Windows up to and including version 8, if a relative URI value is specified in an external style sheet file the base URI is considered to be the URI of the document containing the element and not the URI of the style sheet in which the declaration appears.

Files tree:

index.html
css/style.css -> here the posted code
img/cursors/openhand.cur

Good references:

Collectives™ on Stack Overflow

How can I set CSS only for specific IE browsers?

7 Answers 7

4 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related