I was adding a nice hover overlay to some images, which faded in and out nicely with jQuery, in FireFox. Unfortunately, the effect in IE7 and IE8 was not looking too good. The text was either not fading correctly, or text was popping and looking shoddy. This had to do with some transparent elements and handling of transparent PNGs. Rather than fighting with it or degrading it for everyone, I realized it’d be simple to do a little progressive dehancement by doing a simpler show/hide for IE versions less than 9.

Use PHP to Put Clases for the Different IE Versions on your tag

This technique was popularized by Paul Irish a few years back, and it’s used in the HTML5 Boilerplate. I find it much easier than using conditional comments or other ways of giving different CSS to the older browsers. This way you can keep everything in one stylesheet. I also like to include “ie7” and “ie8” in the classes so they can be targeted specifically.

Check if the Class Exists in your JavaScript

To check whether an element exists in the DOM, you can see whether its length is greater than 0. The below example uses the code if ( $(“html.lt-ie9”).exists() ) to check for the existance of the class lt-ie9 on the html tag.

Leave a Reply

You can use the <pre> tag to post a block of code, or <code> to highlight code within text.