Box model error in Internet Explorer
The box model bug (or box model bug ) is a bug in Microsoft Internet Explorer for Windows up to and including version 5.5. The error affects the dimensions defined by web designers in the stylesheet , as the box model is incorrectly interpreted in the browser.
Background and description of the error
The CSS specifications describe the graphical properties and attributes for HTML elements in which block elements such as the ptag have a width, an inside and outside space ( margin and padding ). It should be noted here that the specification does not use the word "box model"; it has established itself as an appropriate term among developers and browser manufacturers. Before the introduction of HTML 4 and CSS, there were insufficient definitions of the inner and outer spacing of various elements.
According to the specification of the World Wide Web Consortium (W3C), the definable width and height of a block element is independent of the inside and outside distance and the frame width. An element with a defined width of 200 px , an inner distance ( padding ) of 10 px and a frame (border) of 5 px on each side therefore has a total width of 230 px (200 px + 10 px + 10 px + 5 px + 5 px).
However, Internet Explorer includes the inner distance and the frame thickness in the defined width and height, so that the actual space inside the element is smaller than was defined by the developer.
Affected browsers
This error occurs in Internet Explorer up to and including version 5.5; for reasons of compatibility, current versions are also affected if the document is rendered in Quirks mode . The versions for the Macintosh, however, do not show this malfunction.
Consequences and troubleshooting
The reduced size of the HTML elements meant that the division and structure of the website would break apart if the viewer used an affected version of Internet Explorer. It was therefore necessary to create a workaround for these browsers only .
One of the workarounds made use of another mistake in Internet Explorer when parsing the CSS rules and was called a box model hack . It was developed by the former Microsoft employee Tantek Çelik . Because these workarounds were based on other errors and it was unclear whether these would still work in later browser versions, some web developers recommended the use of conditional comments for the different size definitions.
Support and advocate of misinterpretation
Some web developers considered the (incorrect) interpretation of the box model to be the more logical variant.
The W3C defined the attribute for CSS3box-sizing , which makes the different size calculation methods of the block elements freely selectable. This attribute is now supported by most modern browsers.
Web links
Individual evidence
- ↑ http://www.w3.org/TR/1999/REC-CSS1-19990111#formatting-model
- ↑ http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3
- ↑ http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug
- ↑ http://tantek.com/CSS/Examples/boxmodelhack.html
- ↑ http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
- ↑ Archived copy ( Memento of the original from June 14, 2010 in the Internet Archive ) Info: The archive link was inserted automatically and has not yet been checked. Please check the original and archive link according to the instructions and then remove this notice.
- ↑ Archived copy ( Memento of the original from February 27, 2010 in the Internet Archive ) Info: The archive link was inserted automatically and has not yet been checked. Please check the original and archive link according to the instructions and then remove this notice.
- ↑ http://www.quirksmode.org/css/box.html
