2002-09-26: First public version released.
This behavior allows Internet Explorer 5.0 and up to use the proposed CSS3 property, box-sizing.
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.
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.
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;
}
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.