IE6: The Thorn in Every Web Developer's Backside

As a web developer I've spent my fair share of time trying to figure out why certain things don't work as expected (or don't work at all) when dealing with IE6. Today was just another one of those days... After fixing a few issues I though I'd start a list with all the little annoyances one may face when needing to support IE6.

CSS Attribute Selectors

IE6 doesn't support them so don't use them. The one I ran across was applying styling to input checkboxes. Normally you'd do something like input[type=checkbox] which works in most browsers, except for IE. There are several hacks to get around this, but easiest method is to just attach a class to all elements that you'd use attribute selectors for.

Display Table-Row and Table-Cell

IE6 (and 7) doesn't support them so don't use them. I had some JS code that would selectively display or hide a table row depending on the state of a checkbox. To hide a row you just set display:none to the TR element. To show it again you could set display:table-row to the TR but IE6/7 gets confused and jumps off a bridge. The simplest cross-browser work-around is to set display to empty-string to re-show the row. This effectively removes the none style and defaults to the browser inheritance model, whatever that may be.

Detecting IE6 and Hacking

Had a weird case where a jQuery UI floating dialog with an image inside would get stretched to 100%, but only in IE6, every other browser worked fine. I tried setting some absolute widths on the dialog, but due to the box-model bug this produced inconsistent results on different browsers. I had to implement a variable width property using browser sniffing. Did this using jQuery as follows:

iAmIE6AndISuck = function() {
return $.browser.msie && $.browser.version < 7;
}

Yes, yes, I know, the $.browser object is deprecated in jQuery in favor of feature detection. Doesn't matter though, it's unlikely they'll ever remove it. And if they do, I may not upgrade my jQuery library, and if I do, I can just change my wrapper function to detect IE6 some other way when the time comes.