2002-09-26: First public version released.


This behavior allows Internet Explorer 5.0 and up to use the proposed CSS3 property, box-sizing.

Box Model

Microsoft Internet Explorer 6.0 was the first version of IE for Windows to use the correct box model according to the CSS standard. This means that the CSS width property describes the width of the content of an element (content width). Previously IE treated the width as the outer width (border width) of the element. This means that if you define the width for an element the size will be different depending on which browser and version the user is using.

The following relations between the content width and the border width can be useful to understand the differences.

BorderWidth = BorderLeftWidth + PaddingLeft +
   ContentWidth + PaddingRight + BorderRightWidth

So if we have an element with 10px padding, 5px border and we set the width to 100px we will get the following:

130px = 5px + 10px + 100px + 10px + 5px

But if we are using an old version of IE we would get the width 100px. This is a difference of 30px; Enough to destroy the most well designed user interface.

More information can be found at http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width.

To make it even more complicated IE6 can behave in both the above mentioned ways depending on whether the document has a valid doctype declaration. The following article from MSDN covers these issues.

Box Sizing

The first browser that really tackled this problem was Internet Explorer 5.0 for Macintosh. The Mac IE team set out to create a browser to support CSS but they also realized the need to be able to be compatible with IE for Windows. Their solution was to introduce a CSS property called box-sizing. This property can have two different values, border-box and content-box. When set to border-box the IE for Window box model is used and otherwise the standard box model is used.

selector {
   box-sizing: border-box;

The Mozilla developers also realized the need for the box-sizing property but since Mozilla does not add non standard CSS properties that might conflict with future standards they call the property -moz-box-sizing.

selector {
   -moz-box-sizing: border-box;

Even if the 2 most excellent browsers when it comes to CSS decided to support the box-sizing property Microsoft decided that a media bar was a more important feature for IE6 even though the developer community kept asking for better CSS support.

The behavior

Since Microsoft did not want to support the box-sizing property and more and more pages needs to work in more than one browser I decided to create a behavior that adds support for both the content box and the border box models. The behavior works in IE5 and up for Windows and it allows you to force elements in IE5 to follow the CSS box model or you can use IE 6 with a valid doctype and use the border box model.

.border-box {
   behavior:        url("boxsizing.htc");
   box-sizing:      border-box;
   -moz-box-sizing: border-box;

.content-box {
   behavior:        url("boxsizing.htc");
   box-sizing:      content-box;
   -moz-box-sizing: content-box;

Known Limitations

The box sizing behavior only works when all lengths are expressed using the px unit. This is because Internet Explorer has no way to translate between different units. Percentage values are in theory possible to support but I've decided to not include these from the beginning. If there is a demand for percentage values this might be added.

Usage of currentStyle.boxSizing and runtimeStyle.boxSizing should be prevented. If these are used and changed outside the behavior file the behavior might behave incorrectly. The same problems exists with currentStyle.width and runtimeStyle.width (as well as the same for height).

Changes to global style sheets does not update element sizes. This means that if the width is changed by changing the rule inside the style sheet the size is not updated. The size can be updated by removing the behavior and reapply it or changing the style.boxSizing value.


Author: Erik Arvidsson