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.

Answer 1

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!

Answer 2

Conditional comments would work (<!--[if lte IE 8]><stylesheet><![endif]-->), 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.

Answer 3

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:

• One
• Two
• Three
• Four

Answer 4

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

Answer 5

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]-->

Answer 6

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/