CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8internet-explorer-7internet-explorer-6
henryaaron
henryaaron

Reputation: 6192

How can I set CSS only for specific IE browsers?

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.

Upvotes: 10

Views: 66026

Answers (7)

Peter O.
Peter O.

Reputation: 32878

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/

Upvotes: 3

Riccardo Volpe
Riccardo Volpe

Reputation: 1623

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:

Upvotes: 0

Student
Student

Reputation: 28345

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!

Upvotes: 2

marxo
marxo

Reputation: 69

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

Upvotes: 1

Lucky
Lucky

Reputation: 17345

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

Upvotes: 2

Brilliand
Brilliand

Reputation: 13714

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.

Upvotes: 16

Adaz
Adaz

Reputation: 1665

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/

Upvotes: 10

Related Questions