Web標準ブラウザ（モダンブラウザ）とそうでないブラウザでは、CSSで指定するコンテンツのwidthの解釈が違っているらしい。
図1. モダンブラウザ
図2. 非モダンブラウザ
モダンブラウザではwidthを指定しさらにborderやpaddingをしていくと、コンテンツを含む領域が拡大していく。非モダンブラウザでは逆にコンテンツの方が縮小していく。
入れ子のレイアウトの場合、親要素の大きさを基準にコンテンツの大きさが決まってくることが多いが、その場合borderやpaddingだけで指定し、中身のwidthは記述しない方がよいようである。
逆にコンテンツの大きさを指定するなら、位置を決める記述以外にborder やpaddingは指定しない方がよい。とはいってもコンテンツを含む領域の大きさが可変の場合、位置を決めるといっても結構むずかしく、CSSにテクニックが必要だったり、jQueryなどの助けが要るかもしれない。いずれにしろwidthとborder、paddingは併記しない方がよいのかもしれない。
と思っていたらCSS3では、box-sizingというプロパティがあって、widthの解釈を変えられるらしい。
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
今のところベンダープレフィックスが必要だが、このように指定すると非モダンブラウザと同じ解釈になるらしい。つまり「コンテンツの大きさ + padding + border = width」というわけである。勿論このプロパティをあえて指定しなければ、モダンブラウザの解釈になる。
ブロックを格子状に並べたりする場合、確かにこの方が便利なような気がする。同じ大きさのボックスを並べる場合、あるボックスはボーダーあり、あるボックスはボーダーなしとした場合でもwidthをいちいち書き換えなくてよくなる。