TD box model - Quirks

Safari escapes being buggy on a technicality: it doesn't support the traditional (border-box) model.

W3C box model test page.

The box model of a td turns out to be unchangeable in Explorer (Win and Mac), Mozilla and Opera.


This page is in Quirks mode Mode, and the td's and the div have:

width: 160px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;

In the traditional box model this makes for a total width of 160px, since padding is included in the width. Explorer Windows, Mozilla and Opera, however, use the W3C box model, which makes for a total width of 300px (260 + 20 + 20). They correctly give the test div a total width of 160px, though.

The reverse bug applies to Explorer Mac when using the W3C box model.

Cell 1 Cell 2
Test DIV

table-layout: fixed

In quirks mode, the use of table-layout: fixed makes Explorer Windows honour the traditional box model for TDs. It has no effect in the other browsers.

Cell 1 Cell 2
Test DIV