Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 167

The IE Box Model Bug
From the first version of CSS, the width and height of all block-level elements specified explicitly determine only
the width or height of the visible element, and the padding, borders, and margins are applied afterward. In earlier
versions of Internet Explorer, the CSS specifications were implemented incorrectly, which is often referred to as the
Internet Explorer box model bug . Internet Explorer 5 included the content, padding, and borders within a specified
width or height, resulting in a narrower or shorter rendering of the box [21] (Figure 5-3 ).
Top margin
Top border
Top padding
Content
sample
Bottom padding
Bottom border
Bottom margin
Width
Top margin
Top border
Top
padding
Content
sample
Bottom
padding
Bottom border
Bottom margin
Figure 5-3. Comparison of the W3C and the IE5 box model. Note the different interpretation of the width
Internet Explorer 6 and newer IE versions 7 apply the correct implementation in their standards-compliant mode,
but for compatibility reasons, the bug still exists when a page is rendered in Quirks Mode.
Overview of CSS Properties
Table 5-5 summarizes the rich selection of CSS properties. There are 53 properties in CSS1, 122 in CSS2, 115 in
CSS 2.1, and more than 300 (and counting) in CSS3. 8
7 The bug was not present in Internet Explorer for Mac (discontinued in 2006).
8 The value none applies to all media.