Internet Explorer Bugginess

I thought I was doing myself and everyone else a favor when I decided to migrate all the web sites I manage from table-based layout to CSS. In the end that might be the case, but the process was far from smooth. Part of the problem stems from the fact that HTML and CSS are moving targets, with new and sometimes conflicting standards (XHTML vs. HTML5) being proposed, adopted, and implmented to varying degrees by different browsers.

Before you assume you are observing a rendering bug, you should check your site in a variety of standards-compliant browsers including FireFox, Safari, and Google Chrome. If your site looks the same in all versions (Mac, & PC both!) of these browsers, you are probably looking down the barrel of an IE bug.

So here they are, mostly for my own future reference, in no particular order:

HasLayout

This "feature" is proprietary to Microsoft and determines whether or not an element behaves in a certain way or not. Some elements "have layout" be default. Other elements do not. This second group can acquire layout if they are assigned dimensional properties, such as "width", "height". There are other ways to trigger the "hasLayout" property as well. A quick test to see if an element has layout is to type the following in your browser's address field:

javascript: alert(id.currentStyle.hasLayout)

Where <id> would be replaced with the id of an element assigned <id="whatever">. An in-depth discussion of this topic can be found here.

The Box Model

In the early days of the web, Microsoft defined its own standard for the "box model", which differs from the definition set forth by the W3C. See for details.

Dimensional Bugs

This huge class of "bugs" has to do with the way IE renders the size of objects & elements differently than other browsers. Dimensional bugs include problems with the Box Model, floated elements, and more. It's a real nightmare. While there are well-documented hacks to get around IE's quirks, you have to deal with the fact that every version of IE handles things a bit differently. This includes IE 5, 6, & 7 for Windows as well as IE 5 for the Mac. Here is the reference I used to find the appropriate fix for my situation.

IE-Specific CSS

The best way I've found handled IE's "unique interpretation" is with the special HTML <!--[if IE ]> tags which are parsed only be Internet Explorer. Within these tags, you can include css style statements which will only be loaded by the version of internet explorer specified in the tag.

Hacks

Many IE "bugs" can be worked around using standard CSS so that it is creatively mis-interpreted by IE. This technique should be used only as a last resort to handle situations which require more drastic measures. CSS hacks work by hiding themselves from some browsers and not others. The browser that "sees" the code will parse it normally, while the browser that doesn't "see" it will ignore it.

Box Model Hack

Also known as the "Tan hack" after Tantek Celik, the Box Model Hack fixes dimensional bugs in IE5. A special hack allows fixes Opera 5 which contains the same parsing bug that IE5 does.

star-HTML Hack

The one major fix for dimensional bugs is the "star-HTML" hack. This hack works through IE6 for Windows because only IE browsers for Windows would parse the CSS code, within which you could place special dimensioning directives. Note, however, that IE7 ignores the "star html" selector, and IE5 for Mac requires special attention.

IE5 Macintosh

One might expect IE5 to behave the same on the Mac as it does under Windows. Not so. The Mac development team saw fit to implement a different set of non-standards. For one, it recognizes the Child Selector syntax (html>body), which wasn't recognized until IE7 for Windows. So any hacks which rely on IE5 ignoring the Child Selector notation should include the backslash comment hack to prevent IEMac from parsing it as well.

IE5 Mac quirkiness is not a major issue. Even if you care about the small user base, development has halted on this browser, and it will gradually fade asymptotically into nothingness. But if you choose to support it, you'll need to know about the "Commented Backslash" hack.

When you're all done with the above, a star-HTML for IE Win only will look like this:

/* star-HTML hack \*/
 * html .foo
/* This line closes the comment tag for IE5 Mac which doesn't "see" the close comment above */

IE7: More Headaches The good news is that IE7 behaves in a more standards-compliant manner. The bad news is that it invalidates some of the hacks that we used to make IE5 & 6 behave. For one, the "star-HTML" hack is no longer effective. In addition, IE7 supports the "Child Selector" and "Adjacent Sibling Selector" combinators. In the past, we have used

html>body .whatever

as a hack, invisible to IE. This will now be parsed by IE7 which is likely to have unintended consequences.

General Reference

Here are some great sites for solving problems with IE compatibility:
Browser Bug Test
Position is Everything
IE5 for Macintosh