Internet Explorer Conditional CSS

So, your client is still using IE 6!

It gets challenging for web developers when different versions of IE renders web pages differently due to their non-standard rendering engines.

This article will show you five tips on dealing with various versions of IE.

1. IE Conditional Comments

25% Off CouponIE conditional comment is probably the most commonly used to fix the IE bugs for specific versions (IE6, IE7, IE8, IE9). Below are some sample code to target different versions of Internet Explorer:

IE Version Conditional Comments
IE9
<!--[if IE 9]>
IE8
<!--[if IE 8]>
IE7 or below
<!--[if lt IE 8]>
IE8 or above
<!--[if gte IE 8]>
<!--[if IE 9]>
<style type="text/css">
   /* css for IE 9 */
</style>
<![endif]-->

<!--[if lt IE 8]>
   <link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

2. IE Conditional HTML Class

The second option is to use IE conditional comments and designated classes to the HTML tags.

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

3. IE CSS Hacks (not recommended)

The third option is to declare CSS rules that can only be read by IE.

For example, add an asterisk (*) before the CSS property will target IE7 or add an underscore before the property will target IE6.

However, this method is not recommended because they are not valid CSS syntax.

  • IE8 or below: to write CSS rules specifically to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.
  • IE7 or below: add an asterisk (*) before the CSS property.
  • IE6: add an underscore (_) before the property.
.dialog {
   color: red; /* standard */
   color: silver\9; /* IE 8 and below */
   *color: yellow; /* IE 7 and below */
   _color: green; /* IE 6 */
}

4. Use IE7.js

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Download IE7.js here.

5. Encourage your client to upgrade to the latest version of IE

Download the latest Internet Explorer here.

Advertisements
Published in: on March 23, 2011 at 9:23 pm  Comments (2)  

The URI to TrackBack this entry is: https://blackbeltreview.wordpress.com/2011/03/23/internet-explorer-conditional-css/trackback/

RSS feed for comments on this post.

2 CommentsLeave a comment

  1. thanks for posting this.

  2. It’s very easy to find out any matter on web as compared to books, as I found this article at this website.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: