Internet Explorer box model bug

The box model bug (or box model bug) is a bug in older versions of Microsoft Internet Explorer. The error affects the defined dimensions of web designers in the style sheet, as the box model is interpreted incorrectly in the browser.

Background and description of fault

In the CSS specifications, the graphical properties and attributes for HTML elements are described in which have block-level elements such as the p tag a width, an inner and outer distance ( margin and padding ). It should be noted here that the specification the word " box model " is not used, it has established itself at the developers and browser vendors as a more appropriate term. Before the introduction of HTML 4 and CSS, there was insufficient definitions of the inner and outer distances of different elements.

According to the specification of the World Wide Web Consortium (W3C), the defined width and height of a block element is independent of the inner and outer spacing and the frame width. An element with a defined width of 200 px and a margin ( margin ) of 10 px on each side thus has an overall width of 220 px (200 px 10 px 10 px).

But Internet Explorer expects the padding and border width defined in the width and height, so that the actual space inside the element is less than defined by the developer.

Affected browser

This error occurs in Internet Explorer up to and including version 5.5, but also current releases are affected if the document is rendered in quirks mode. The versions for the Macintosh, however, do not show the said misconduct.

Follow and Troubleshooting

The reduced size of the HTML elements with the result that the layout and structure of the website fell apart when the viewer uses an affected Internet Explorer version. It was therefore necessary to create a workaround for this browser.

One of the workarounds made ​​a further error in Internet Explorer when parsing the CSS rules exploited and box model hack was called. It was developed by former Microsoft employees Tantek Çelik. Because these workarounds were based on more mistake and it was unclear whether these still work in later browser versions recommended several web developers to use conditional comments for the different size definitions.

Support and advocate of misinterpretation

Some web developers kept the (incorrect ) interpretation of the box model for the more logical option.

The W3C defined for the attribute CSS3 box -sizing, which makes the different size calculation methods of block elements freely selectable. This attribute is now supported by most modern browsers.