Internet Explorer box model bug

From Wikipedia, the free encyclopedia

You have new messages (last change).
The difference between the World Wide Web Consortium's width and Internet Explorer's width of a block-level element
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.

Contents

[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

Internet Explorer versions 6 and 7 are not affected by the bug if the page contains certain HTML document type declarations (DTDs). These versions maintain the buggy behaviour when in quirks mode for reasons of backwards compatibility.[4] Quirks mode is triggered, for example when the DTD is absent or incomplete, if it uses an HTML 3 or earlier DTD, if it uses the transitional or frameset DTD without a URL, 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.[5]

Various work-arounds have been devised to force Internet Explorer 5 and earlier to display pages correctly. These work-arounds generally exploit other bugs in Internet Explorer's CSS selector parser in order to hide certain 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]

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 comments, to work around the box model bug in older versions of Internet Explorer.[6][7]

[edit] Criticism

Web design professionals Douglas Bowman and Ethan Marcotte have stated that the original Internet Explorer box model actually represents a better, more logical approach based on common sense.[8][9] An example given by Peter-Paul Koch is a real world (physical) box, whose dimensions always refer to the box itself (including potential padding), and never its content.[10] In CSS designs, this definition allows the exact application of both relative dimensions and absolute paddings to any given box, which is not possible with the standards-compliant model without workarounds.[11] Peter-Paul Koch also says that this box model is more useful for graphic designers, who create designs based on the visible width of boxes rather than the supposed width of their content.[12] Another argument, given by Bernie Zimmermann, in support of the Internet Explorer box model is its closeness to the definition of cell dimensions and paddings in the HTML table model, as defined by the W3C and implemented in most browsers.[13]

With the current CSS3 draft, the World Wide Web Consortium offers an explicit choice of box models using the box-sizing property.[14] If included in the final recommendation and supported by all modern browsers, this would allow web designers to use either box model reliably.

[edit] References

  1. ^ Håkon Wium Lie; Bert Bos (December 17, 1996). Cascading Style Sheets, level 1. W3C. Retrieved on 2006-12-09.
  2. ^ Håkon Wium Lie; Bert Bos (January 11, 1999). Cascading Style Sheets, level 1. W3C. Retrieved on 2006-12-09.
  3. ^ Lance Silver (March 2001). CSS Enhancements in Internet Explorer 6. MSDN Library. Microsoft. Retrieved on 2006-12-09.
  4. ^ 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"
  5. ^ !DOCTYPE. Retrieved on 2007-01-13. "The following examples show how to use the !DOCTYPE declaration to specify the DTD a document conforms to, and to switch Internet Explorer 6 and later to standards-compliant mode."
  6. ^ Roger Johansson (December 21, 2006). Internet Explorer and the CSS box model. 456 Berea Street. Retrieved on 2007-01-14.
  7. ^ Arve Bersvendsen (February 2004). Hack-free CSS for IE. Arve Bersvendsen's weblog. Retrieved on 2007-01-16.
  8. ^ http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/
  9. ^ http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/ethan-marcotte/
  10. ^ http://www.quirksmode.org/css/box.html
  11. ^ http://www.washington.edu/webinfo/snippets/css/boxmodel.html
  12. ^ http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/
  13. ^ http://www.bernzilla.com/item.php?id=33
  14. ^ CSS3 Basic User Interface Module. W3C.

[edit] External links

Retrieved from "http://en.wikipedia.org../../../i/n/t/Internet_Explorer_box_model_bug_251c.html"
In other languages