IE8 css selector

css internet-explorer css-hack

150,164

Solution 1

I'm not going to get in a debate about whether or not this method should be used, but this will let you set specific css attributes for IE8-9 only (note: it is not a selector, so a bit different than what you asked):

Use '\0/' after each css declaration, so:

#nav li ul  {
  left: -39px\0/ !important;
}

And to build off another answer, you can do this to assign variou styles to IE6, IE7, and IE8:

#nav li ul  {
   *left: -7px    !important; /* IE 7 (IE6 also uses this, so put it first) */
   _left: -6px    !important; /* IE 6 */
    left: -8px\0/ !important; /* IE 8-9 */
}

source: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

Solution 2

2013 update: IE10+ no longer supports conditional comments.

Original answer:

Some people seem to be confused because this does not answer the letter of the question, only the spirit - so for clarification:

There is no such thing as a browser selector. There are hacks that take advantage of bugs and/or glitches in specific browsers' CSS parsers, but relying on these are setting yourself up for failure. There is a standard, accepted way to deal with this:

Use conditional comments to target IE only.

Example:

<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->

Everything inside the two <!--> will be ignored by all non-IE browsers as a comment, and IE versions that are less than IE8 will skip it. Only IE8 and greater will process it. 2013 update: IE10+ will also ignore it as a comment.

Solution 3

Take a look at these:

/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }

/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }

(Source: David Bloom’s CSS hack for IE8 Standards Mode)

Solution 4

you can use like this. it's better than

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

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
  <!--[if IE 7 ]> <body class="ie7"> <![endif]-->
  <!--[if IE 8 ]> <body class="ie8"> <![endif]-->
  <!--[if !IE]>--> <body> <!--<![endif]-->

div.foo { color: inherit;} .ie7 div.foo { color: #ff8000; }

Solution 5

Building upon image72's excellent answer, you could actually have advanced CSS selectors like this:

<!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->

so that in your css you can do this:

.notIE   .foo { color: blue;   } /* Target all browsers except IE */
.IE9up   .foo { color: green;  } /* Taget IE equal or greater than 9 */
.IE8     .foo { color: orange; } /* Taget IE 8 only */
.IE7down .foo { color: red;    } /* Target IE equal or less than 7 */

.IE8 .foo, .IE9 .foo {
    font-size: 1.2em;            /* Target IE8 & IE9 only */
}

.bar { background-color: gray; } /* Applies to all browsers, as usual */

/* Maybe show a message only to IE users? */
.notIE #betterBrowser { display: none;  } /* Any browser except IE */
.IE    #betterBrowser { display: block; } /* All versions of IE */

This is great because:

It's perfectly standards compliant (no ugly/dangerous css hacks)
No need to have separate stylesheets
You can easily target any version of IE as well as complex combinations

View more solutions

150,164

Shishir Morshed

I am an enthusiastic web technology specialist with 8+ years' experience of developing robust solutions for global brands. Selected as One of 22 High-Potential Wunderman/MSC employee of 2018 globally. Spearheaded a team, that won the National Hackathon Championship of 2016. Currently, leading a team of sixteen high performing members dedicated to GSK offshore service. In my free time, I travel, enjoy photography with friends and family.

Updated on July 29, 2020

Comments

Shishir Morshed almost 4 years
To target elements only in IE browsers i'll use

IE6:
```
* html #nav li ul {
    left: -39px !important;
    border: 1px solid red;
}
```
IE7:
```
*+html #nav li ul  {
    left: -39px! important;
}
```
Does anyone know how to target IE8?
- Boldewyn over 14 years
  
  Hey, it passed ACID2, so what do you need an IE8 hack for? (Just joking...)
- Dirk Diggler almost 14 years
  
  Also, underscore before the property (div {_display:none;}) works for IE6, asterisk before the property (div {*display:none;}) works for IE7
jonsidnell about 15 years

Just for completeness, the jQuery plugin that adds browser and platform classes that you can use in CSS (and even in your jQuery functions) is available at jquery.thewikies.com/browser
Quentin almost 15 years

I'd go so far as to say "Use conditional comments to target any version(s) of IE".
Michal Sznajder almost 15 years

Rex nailed it. CSS hacks are called hacks for a reason - they're unprofessional programming. Use conditional comments. blogs.msdn.com/ie/archive/2005/10/12/480242.aspx
Michiel almost 15 years

I guess your conditional statements do the trick, though this doesn't really answer the question by Chris who wants to know of a selector to address IE8 only
JonDrnek almost 15 years

@Michiel since that's not possible without exploiting a browser bug, the answer has two parts: a) don't do that; and b) here's how to do it instead.
philfreo over 14 years

there's an updated note on this that says it may actually target IE7 also
Tracker1 over 13 years

I saw something similar on the jqueryui themeroller demo jqueryui.com/themeroller/developertool Works pretty nicely... if you can control the outer markup for your page/site. Working on a major rewrite now, and using this for my IE specific code... ie6,ie7,ie8,ie9, ieold (pre-9) and noie (non-ie) ... there's only a few places where I'm getting specific, but having the option from the markup + CSS alone is nice (no relying on scripts). Though I still need scripts to apply additional styles since IE6 doesn't have attribute selectors.
Sander about 13 years

A little late, but this was not the question ;) It is not about conditional comments, but about a CSS selector. I think everyone around here knows that those are around, and the selectors are the thing that are difficult to find.
JonDrnek about 13 years

@Sander there is no such thing as a browser selector, and hacks are only setting yourself up for failure. Such questions are great opportunities for education.
kflorence about 13 years

It only targets IE7 (and IE 6) if you add the semicolon ';' to the end of the line
NightOwl888 almost 13 years

Ok, while it would seem that we can agree that this is the "right" way to fix the issue, what if you are using themes with ASP.NET (another MS product)? ASP.NET themes wires up the css files automatically in the HEAD and although the proposed solution can be done manually after the fact, it does not support ASP.NET themes (file-per-theme).
JonDrnek almost 13 years

@nightowl888 a simple solution off the top of my head would be to use masterpage in your theme and manually reference the IE specific override files.
NightOwl888 almost 13 years

In other words, roll my own theme solution? The only way I see around this is to not put the CSS files in the App_Themes directory where the framework automatically wires them up (or to maintain separate css files outside of the theme).
Alkanshel almost 13 years

@jon "CSS hacks are called hacks for a reason - they're unprofessional programming." Well I suppose if browsers like IE8 were "professionally programmed" we wouldn't need the hacks, now would we?
JonDrnek almost 13 years

@Amalgovinus making your software bad because other software is bad hardly improves the situation.
Michal Sznajder almost 13 years

@Amalgovinius Exactly what Rex M said - as software developers, our job is to write the best code we can in any given circumstances.
Alkanshel over 12 years

I don't think hacky code precludes the better code. It's not the fault of the dev that hacks are needed to deal with unwieldy and legacy platforms without pulling one's hair out--I'll gladly take the scornful gazes that come with hacky presentational code so long as it displays properly in everything I can throw at it, especially considering most people who will be viewing it don't even really know what html is..
peteorpeter over 12 years

There are two factors that mean you are more likely to tolerate these unsavory hacks as a necessary evil: 1. IE6-8 makes up a large portion of your user base (corporate clients, anyone?) 2. For one reason or another you prefer to keep CSS in a single external file (code maintenance, deployment rituals, desire to remove one more http request). In this day and age, modernizr helps with much of this, but that as well might not be feasible in some environments.
JonDrnek over 12 years

@peterorpeter modernizr is helpful, but if you're obligated to maintain the nightmare that is IE6, I don't think an extra HttpRequest for those poor souls is going to make much of a difference, whilst everyone else gets a nice, clean, non-hacked file. Being responsible for one of the largest WCMS systems out there, I can assure you fewer CSS files does not enhance maintainability. We went from 3 to about 200 merged at compile-time, and CSS-related bugs dropped by 95%; new changes are turned around 40% faster.
BBog over 12 years

what worked for me was font-size:10px\9; All other versions and combinations failed... I needed this solely for IE8
codeassembly almost 12 years

New content added to page with ajax will not be styled with the conditional css styles so this method fails for ajax, you still need specific selectors hack.
Zach Lysobey about 11 years

Might want to mention that IE10 no longer supports conditional comments, so "IE8 and greater" should be "IE8 and IE9"
Ricky Jiao over 9 years

How can I target IE8 only? As \0/ and \9 work for both IE 8 and 9.
Aart den Braber almost 9 years

I don't believe this is the correct way of dealing with this. The first is fine (although why you wouldn't add a class to body is unknown to me), but putting browser-dependent content for the whole page is bad practice. It enlarges the HTML-size dramatically and makes you code hard to maintain.
Doug S almost 8 years

Warning. This also matches IE10, IE11, and probably future versions.