Skip to content Skip to sidebar Skip to footer

Css Conditional On Ie

I want to say something like #mydiv { background-color: (IE ? red : blue) } I believe this can be done with conditional comments but it will be ugly. Is there some other hack that

Solution 1:

I doubt you can get much less "ugly" than this:

Inside CSS file for all browsers:

#mydiv { background: blue }

After you have included that CSS file:

<!--[if IE]>
<style type="text/css">
#mydiv { background: red }
</style>
<![endif]-->

Of course, you can load a whole new stylesheet for IE.

Solution 2:

The cleanest, least hacky way that I've seen to solve this is to ALWAYS load a special stylesheet specifically for various versions of IE.

Put all of your IE Version specific styling in those files. It may not look elegant at first but as you add more and more IE Version specific rules...it makes things infinitely easier.

...not to mention that you don't have to worry about browsers changing the way they handle the various loopholes people use to implement IE hacks.

Solution 3:

You might want to consider the way that html5boilerplate uses:

html:

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

css:

#mydiv { background-color: blue; }
.ie7#mydiv, .ie6#mydiv { background-color: red; }

Post a Comment for "Css Conditional On Ie"