widthのワナ

現在IEはバージョン7.0(このエントリーの時点ではIE8β版がリリース)でとても柔軟性のあるブラウザで多少のミスコードも許容してくれます。
今となってはひと昔前となりますが、IE5.5から6.0への渡河期には私も含め多くのウェブデザイナがwidthの迷宮に迷い込んだものです。5.5と6.0、このわずかなバージョンアップはwidth(幅)の認識範囲がまるで違ったのです。あるボックスの左辺を下記のように表したとき、

|margin|
|padding|
|border|
|ボックス内側|
|border|
|padding|
|margin|

5.5のwidth—> padding|border|ボックス内側|border|padding
6.0のwidth—>|ボックス内側|

つまり5.5ではborderとpaddingを含んでしまうので、6.0でも同様のレイアウトを維持させる場合テクニックが必要となります。
結局は足し算引き算の問題になるのですが、これが結構悩ましいのです。7.0主流の現在でも一応5.5に対応したコーディングはしています。こんな具合に。

#sample
{
padding:0 5px 0 10px;
border:1px;
width: 500px;
voice-family: ""}"";
voice-family: inherit;
width: 483px;
}