For the most part, cross-browser development means “make the site work in Microsoft Internet Explorer” (I treat mobile devices in a separate series of articles).

I compare developing for Internet Explorer to growing up in a mental asylum. If you were born in an asylum, you would grow up talking to people who believed they were Napoleon, and that bugs were constantly crawling out of the walls. In that context, the conversations you had with the inmates would make a kind of sense. Once outside the grounds of the asylum however. sudden outbursts of “Green ideas leak from the sky! Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn!” would be met with confusion and incredulity by the generally sane populace, making communication very difficult.

Developing for IE only is living in that madhouse and constantly having that conversation. It’s a far better experience to grow up in the outside world, learning how to talk rationally, using standards, and then go into the madhouse and try to make sense of what is happening there.

So my suggested web development workflow is this: develop for a standards-aware browser first. It doesn’t particularly matter which: I prefer Firefox, but Safari or Chrome could work equally well. Then take your work and look at it in IE.

IE’s Issues

Microsoft’s ongoing development of Internet Explorer is improving the browser to meet web standards. That being said, the standards that IE6 misinterprets, corrupts or ignores are many. The errors are, in fact, far too numerous to cover completely here. You can get some idea by using IE to visit pages designed to test a browser’s conformance to web standards, such as the Acid 2 and 3 tests, or HTML 5, or looking at the incompatibility tables (and associated solutions) on websites such as quirksmode.org and positioniseverything.net. My goal here is to provide answers to some of the most common problems.

Broadly speaking, your goal in developing web pages for IE is to retain the browser in “hasLayout” mode. hasLayout is somewhat arbitrary state for Internet Explorer, representing its effort to follow some web standards. This is an attempt – indeed, following all the rules can nonetheless jump IE out of hasLayout and into the dreaded “Quirks” mode, which means that the browser basically follows its own internal rules and lays your page out however it wants. And even when it is well-behaved, IE doesn’t follow the rules as it should… but retaining hasLayout mode is better than nothing.

A sample of what the various versions of IE don’t do.

• No support for CSS3, at all (although you can trick IE into doing some CSS3-like things with its own proprietary filters).

• Little support for CSS2, at least up to IE8. So no :first-child, etc.

• No support for :hover on any element other than a tags.

• IE 6 and 7 have no support for display: table or related display properties

• No understanding of HTML5

• No support for alpha transparency on PNGs until IE8.

• Continued reliance on the presence of the <embed> tag in placing multimedia on the page, when it’s not XHTML and IE doesn’t even use it.

The following bugs and problems are (mostly) constrained to IE6:

• Broken box model – the width of elements is calculated differently in IE6

• Double margin bug

• No awareness of min- or max-width or height

• “Stepdown” on floated elements

• Anything before DOCTYPE triggers Quirks mode.