IE8 css selector

Question

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?

Answer 1

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.

Answer 2

Why would you want to target IE8 only? If your CSS is well written, you should not have any problems in IE8.

Answer 3

In the ASP.NET world, I've tended to use the built-in BrowserCaps feature to write out a set of classes onto the body tag that enable you to target any combination of browser and platform.

So in pre-render, I would run something like this code (assuming you give your tag an ID and make it runat the server):

HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody");
_body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);

This code enables you to then target a specific browser in your CSS like this:

.IE8 #nav ul li { .... }
.IE7 #nav ul li { .... }
.MacPPC.Firefox #nav ul li { .... }

We create a sub-class of System.Web.UI.MasterPage and make sure all of our master pages inherit from our specialised MasterPage so that every page gets these classes added on for free.

If you're not in an ASP.NET environment, you could use jQuery which has a browser plugin that dynamically adds similar class names on page-load.

This method has the benefit of removing conditional comments from your markup, and also of keeping both your main styles and your browser-specific styles in roughly the same place in your CSS files. It also means your CSS is more future-proof (since it doesn't rely on bugs that may be fixed) and helps your CSS code make much more sense since you only have to see

.IE8 #container { .... }

Instead of

* html #container { .... }

or worse!

Answer 4

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)

Answer 5

Why would you want to target IE8 only? If your CSS is well written, you should not have any problems in IE8.

ROFL let me rephrase that for you If your IE8 is well written, you should not have any problems with CSS.

I do wish there was a star hack equivalent for IE8... maintaining CSS for all version in one stylesheet is becoming more and more complicated now.

They should have had CSS conditional comments. Pity they were so confident as to kill the hack before making sure the bugs were gone.

Answer 6

OK so, it isn't css hack, but out of frustration for not being able to find ways to target ie8 from css, and due to policy of not having ie specific css files, I had to do following, which I assume someone else might find useful:

if (jQuery.browser.version==8.0) {
   $(results).css({
         'left':'23px',
         'top':'-253px'
      });
}

Answer 7

CSS style only for IE8:

.divLogRight{color:Blue; color:Red\9; *color:Blue;}

Only IE8 will be Red.

first Blue: for all browsers.

Red: IE6,7,8 Only

Second Blue: IE6,7 Only

---

So Red = for IE8 only.

http://paulirish.com/2009/browser-specific-css-hacks/

Answer 8

This question is ancient but..

Right after the opening body tag..

<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->

Right before the closing body tag..

<!--[if gte IE 8]>
</div>
<![endif]-->

CSS..

#IE8Body #nav li ul {}

You could do this for all IE browsers using conditional statements, OR target ALL browsers by encapsulating all content in a div with browser name + version server-side

Answer 9

Rex nailed it. CSS hacks are called hacks for a reason - they're unprofessional programming.

but using * html and * + html are NOT hacks, that is, those two are VALID css,

on the other hand, blue/9 IS a hack, since it does NOT validate.

Using things like * html and * + html is a good practice, as they can be used to implement progressive enhancement.

edit: from the discussion below I must say its better to use html>body instead of the star html

those 2 selectors depend on the extra element IE adds before the html element (its like a IE "feature")

blue/9 on the other hand, depends on a IE8 bug, therefore is a hack.

the point is: CSS selectors are NOT CSS hacks

...old question, I know, but its important to make clear the difference, and anyone can find this on google

Answer 10

I realize this is an old question but it was the first result on Google when I searched and I think I have found a better solution than the highest ranked suggestion and what the OP chose to do.

#nav li ul:not(.stupidIE) { color:red }

So technically this is the opposite of what the OP wanted, but that just means you have to apply the rule you want for IE8 first and then apply this for everything else. Of course you can put anything inside the () as long as it is valid css that doesn't actually select anything. IE8 chokes on this line and doesn't apply it, but previous IEs (ok I only checked IE7, I have stopped caring about IE6), just ignore the :not() and do apply the declarations. And of course every other browser (I tested Safari 5, Opera 10.5, Firefox 3.6) applies that css as you would expect.

So this solution, I guess like any other pure CSS solution would assume that if the IE developers add support for the :not selector then they will also fix what ever discrepancy was causing you to target IE8.

Answer 11

"Why would you want to target IE8 only? If your CSS is well written, you should not have any problems in IE8."

How about you just answer the fucking question and stop being a dip-shit.

Answer 12

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 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 */
}

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

Answer 13

I have a solution that I use only when I have to, after I build my html & css valid and working in most browsers, I do the occasional hack with this amazing piece of javascript from Rafael Lima. http://rafael.adm.br/css_browser_selector/

It keeps my CSS & HTML valid and clean, I know it's not the ideal solution, using javascript to fix hacks, but as long as your code is originally as close as possible (silly IE just breaks things sometimes) then moving something a few px with javascript isn't as big of a deal as some people think. Plus for time/cost reasons is a quick & easy fix.