It’s an unfortunate historical fact that Internet Explorer 6 incorrectly expanded any dimensionally restricted block element, preventing oversize content from overflowing as the CSS specifications required. IE7 resolved this issue, aligning box behavior with the W3C standard and allowing the overflow property to function as intended.
[css]
div {
background: #fff;
border: 6px solid #ccc;
height: 100px;
margin: 20px;
padding: 20px;
width: 400px;
}
[/css]
While IE6’s behavior is now obsolete, understanding the difference between content-box (the legacy default) and border-box (the modern standard) remains critical for modern layout design. The W3C asserts that a rigidly sized block box must allow oversize content to protrude or overflow beyond the sized box’s edges—exactly what modern browsers like Firefox, Chrome, and Safari enforce today.
There is no viable fix for IE6’s incorrect behavior in production environments; instead, developers should avoid legacy constraints and adopt modern resets like * { box-sizing: border-box; } to ensure predictable sizing and overflow handling.
If you want to read more about this historical issue, then Click Here ….
Resources & Links
- CSS Length Values via Mozilla Developer Network
- HTML Borders via Quackit.com
- The CSS Box Model via CSS-Tricks
- CSS Float Theory via Smashing Magazine
- CSS Positioning 101 via A List Apart
- Resources for Grid-Based Design via Vandelay Design