Internet Explorer Box Model Bug - Workarounds

Workarounds

Internet Explorer versions 6 and onward are not affected by the bug if the page contains certain HTML document type declarations. These versions maintain the buggy behavior when in quirks mode for reasons of backward compatibility. For example, quirks mode is triggered:

• When the document type declaration is absent or incomplete;
• When an HTML 3 or earlier document is encountered;
• When an HTML 4.0 Transitional or Frameset document type declaration is used and a system identifier (URI) is not present;
• When an SGML comment or other unrecognized content appears before the document type declaration
• When there are errors anywhere in the document
• Internet Explorer 6 also uses quirks mode if there is an XML declaration prior to the document type declaration.

Various workarounds have been devised to force Internet Explorer versions 5 and earlier to display Web pages using the W3C box model. These workarounds generally exploit unrelated bugs in Internet Explorer's CSS selector processing in order to hide certain rules from the browser. The best known of these workarounds is the “box model hack” developed by Tantek Çelik, a former Microsoft employee who developed this idea while working on Internet Explorer for the Macintosh. It involves specifying a width declaration for Internet Explorer for Windows, and then overriding it with another width declaration for CSS-compliant browsers. This second declaration is hidden from Internet Explorer for Windows by exploiting other bugs in the way that that browser parses CSS rules. The implementation of these CSS “hacks” has been further complicated by the public release of Internet Explorer 7, which has had some issues fixed, but not others, causing undesired results in pages using these hacks.

Box model hacks have proven unreliable because they rely on bugs in browsers' CSS support that may be fixed in later versions. For this reason, some Web developers have instead recommended either avoiding specifying both width and padding for the same element or using conditional comment and/or CSS filters to work around the box model bug in older versions of Internet Explorer.