IE Conditional CSS

lholmquist Jun 11, 2012 3:46 PM

This is really a questions, i just thought this might be helpful to others.

This is one way of having differnt styles for different IE browsers.

I have this at the top of my html

<!DOCTYPE html>

<!--[if lt IE 7]> <html class="no-js  lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js  lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js  lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if !(IE)]><!--> <html class=""> <!--<![endif]-->

then in my style sheet i have something like this

.screens
{

... some styles


}


.lt-ie8 .screens
{

....slightly different styles

}

I got this from paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

also similar to how modernizer works with adding values to the html tag

1. Re: IE Conditional CSS

kborchers Jun 11, 2012 3:53 PM (in response to lholmquist)

Just FYI, if you read the updates to that article, this should really be used as a last resort. You can usually get all versions of IE very close to how the other browsers look just by adding a couple of lines to your CSS to make element selecting a little more specific or adding a height or width to an element. The less you can do that is browser specific the better because then it's a lot easier to maintain when the browsers inevitably change how they do things again.
Actions