IE Hacks and Conditional Comments

It always seemed like it would be interesting to serve a gif image to Internet Explorer 6 and a png to other browsers, instead of using a CSS behavior file (like IE PNG Fix or SuperSleight). So now that IE 6 is nearly gone, here’s how.

Demo

The gif is surrounded with a conditional comment.

 

<img class="modern" src="logo.png" />
<!--[if lt IE 7 ]> <img src="logo.gif" > <![endif]-->

 

At this point all browsers display only the png, except IE 6 displays both the png and the gif.

So in the css, to keep the png from displaying to IE 6:

 

img.modern {
_display:none; /* IE 6 */
}

 

The underscore hack before display: none targets IE 6 only.

OK, so this uses a conditional comment and a CSS hack; a png fix or background image is probably a better choice. But since IE 9 works only in Windows 7, the IE hack or conditional comments and style sheets for IE 7 and IE 8 are going to be with us for some time.

More information on hacks and conditional comments can be found on Web Designer Wall and Paul Irish.

This entry was posted in website design. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>