ブラウザによるwidthの解釈の違いと対策

以下は、heightについても同様です。

ブラウザによるwidthの解釈の違い

Firefox（正しい解釈）

結果的なwidth = padding×2 + border×2 + width

IE,NN4

width = padding + border + 中身

NN6

width = 中身

ボックスモデルハック（Box Model Hack)

div#main{
margin: 10px;
padding: 10px;
width: 200px;　　　　//OPERA用width値
\width: 220px;　　　　//IE5以下用width値
w\idth: 200px;　　　//モダンブラウザ用width値
}

※ \ = ￥

解決策

ボックスモデルハックを用いる。または、
「widthとpadding/borderを一緒に指定しない、特に、ピクセル単位で合わせるところではborderを使わない」

参考リンク

• http://www.fromdfj.net/html/border2.html
• http://tokage.chu.jp/blo/?eid=373392
• http://adp.daa.jp/archives/000265.html
• http://2nose.com/css/index.php?ID=4

背景色と背景画像を同時に指定する

background-color: #000;
background-image: url(画像のURL);
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: left top;

background: url(URL) no-repeat fixed left top;で指定すると、後から指定したほうしか反映されないが、分けて書くと両方が反映される。

TMP*blogさんに感謝