Internet Explorer box model bug

From Wikipedia, the free encyclopedia

The difference between the World Wide Web Consortium's width and Internet Explorer's width of a block-level element

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 are not affected in their standards-compliant mode, only in "quirks mode." The bug does not affect Internet Explorer for Mac on the Macintosh platform.

1 Bug
2 Work-arounds
3 References
4 External links

[edit] 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 CSS 1 specification released by the World Wide Web Consortium in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element it should determine only the width or height of the content within the box, with the padding, borders and margins added afterwards^[1]^[2]. Internet Explorer version 5 incorrectly includes the padding and borders within the specified width or height, resulting in a narrower or shorter box when displayed^[3].

[edit] 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 other bugs in the way 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^[4].

Internet Explorer versions 6 and 7^[4] are not affected by the bug if the page contains a valid HTML document type declaration (DTD). These versions maintain the buggy behaviour when in quirks mode for reasons of backwards compatibility. Quirks mode is triggered, for example when the DTD is absent or incomplete or if there are parse errors in the HTML. IE6 also goes into quirks mode if there is an XML declaration tag before the DOCTYPE tag.

[edit] References

^ Håkon Wium Lie; Bert Bos (December 17, 1996). Cascading Style Sheets, level 1. W3C. Retrieved on 2006-12-09.
^ Håkon Wium Lie; Bert Bos (January 11, 1999). Cascading Style Sheets, level 1. W3C. Retrieved on 2006-12-09.
^ Lance Silver (March 2001). CSS Enhancements in Internet Explorer 6. MSDN Library. Microsoft. Retrieved on 2006-12-09.
^ ^a ^b Markus Mielke (February 02, 2006). What’s New for CSS in Beta 2 Preview?. The Microsoft Internet Explorer Weblog. MSDN Blogs. Retrieved on 2006-12-09. "Pages authored under non-strict mode (or “quirks mode”) will not change behavior in IE7"