Internet Explorer box model bug
From Free net encyclopedia
Image:Box-model-bug.png The Internet Explorer box model bug is one of the best-known software bugs in a popular implementation of Cascading Style Sheets (CSS). It affects CSS-aware versions of Microsoft's Internet Explorer web browser for Windows up to version six. Internet Explorer 6 and 7 is not affected in its standards-compliant mode, only in its "quirks mode." The bug does not affect Internet Explorer for Mac on the Macintosh platform.
Bug
The CSS box model describes how certain elements of web pages are displayed by graphical browsers. The box model allows block-level elements - such as paragraphs and block-quotations - to be surrounded by padding, borders, and margins. According to the specification for CSS published by the World Wide Web Consortium, when a width is explicitly specified for any block-level element it should determine only the width of the content within the box, with the padding, borders and margins added afterwards. Internet Explorer version 5 incorrectly includes the padding and borders within the specified width, resulting in a narrower box when displayed.
Work-arounds
Various work-arounds have been devised to force Internet Explorer to display pages correctly. These work-arounds generally exploit other bugs in Internet Explorer's layout engine to hide rules from the browser. The best known of these work-arounds is the "box model hack" developed by Tantek Çelik. Çelik's hack — developed during his time at Microsoft working on Internet Explorer for the Macintosh, which is not affected by the bug — involves specifying a width for Internet Explorer for Windows which is then over-ridden by another width specification. This second specification is hidden from Internet Explorer for Windows by exploiting a bug in the way that browser parses CSS rules. Internet Explorer 6 is not affected by the bug if the page contains a valid HTML document type declaration (DTD). This version goes into "quirks mode" and maintains the buggy behaviour when the DTD is absent or incomplete for reasons of backwards compatibility. It also uses quirks mode if there is an XML declaration tag before the DOCTYPE tag.
External links
- Microsoft's description of how Internet Explorer 6 correctly complies with the CSS standard
- Tantek Çelik's description of the "box model hack"
- Getting Internet Explorer to Play Well with CSS - article on about.com that outlines various ways to get around box model problem and other IE bugs.
- Modified Simplified Box Model Hack
- Hack-free CSS for IE - article on using conditional statements instead of hack to deal with IE.