Long live the quirks-mode box model!

There are lots of things to hate about Internet Explorer, but I've always preferred their "broken" box model. Well sometimes bugs turn out to be loveable, soft, furry critters, and so now you can have it even in standards mode, thanks to CSS3:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

From wikipedia:

Web designer Doug Bowman has said that the original Internet Explorer box model represents a better, more logical approach.^[18] Peter-Paul Koch gives the example of a physical box, whose dimensions always refer to the box itself, including potential padding, but never its content.^[10] He says that this box model is more useful for graphic designers, who create designs based on the visible width of boxes rather than the width of their content.^[19] Bernie Zimmermann says that the Internet Explorer box model is closer to the definition of cell dimensions and padding used in the HTML table model.^[20]

The W3C has included a "box-sizing" property in CSS3. When box-sizing: border-box; is specified for an element, any padding or border of the element is drawn inside the specified width and height, "as commonly implemented by legacy HTML user agents".^[21] Internet Explorer 8, Opera 7.0 and later, and Konqueror 3.3.2 and later support the CSS3 box-sizing property. Gecko-based browsers such as Mozilla Firefox support the same functionality using a proprietary "-moz-box-sizing" property,^[22] and WebKit browsers such as Apple Safari and Google Chrome support it as a proprietary "-webkit-box-sizing" property.^[23]