Why you should use border-box for everything

Internet Explorer 6. The name still sends chills down the spine of any web designer. The compatibility nightmare that refuses to die, IE6 has cost developers countless hours of productivity. One of the most diabolical of the compatibility issues is the difference in box models: namely, while “width” and “height” specifications referred to the content of a container (according to the W3C and CSS specifications), IE6 used “width” and “height” to describe the box as a whole, including borders and padding. This made it extremely difficult to write compatible code (without invoking standards mode in IE6). There’s just one thing that bugs me about this: I think that Microsoft was right in defining the box model that way.