同じにならない

一昨日 書いたwidthとpaddingの兼ね合いと回避方法の話。

widthとpaddingの兼ね合い

まず、widthとpaddingの兼ね合いについて。
widthで幅を指定してある部分にpaddingで内部に隙間を作った場合、IE6とFirefoxで結果が異なるのだ(｀・ω・´)
IE6では幅は変わらずに中身が狭くなるけれど、Firefoxではpaddingの分だけ外に幅が広がっちゃいまする(；´Д｀)

具体例
width（幅）を100px、左右のpadding（内側の隙間）を10pxずつとした場合。

	IE6	Firefox
全体の幅	100px	120px
中身の幅	80px	100px

図で書くと こんな感じ(　・ω・)っ

IE6

Firefox

水色の部分がpaddingで指定した余白。
薄い緑の部分が中身。

実際の画面では こうなりまする。
わかりやすいように背景に色を付けてみますた。

IE6

Firefox

本文・サイドバーと同じ幅にしたつもりなのに、Firefoxではタイトル部分が えらく広がっちゃってまつ…(ノД`)

これは、ブラウザのpaddingの解釈が違うせいで、おかしいのはIE6の方だそうなんだけど、自分の指定したい幅にするために いちいちpaddingの分 引いて計算してwidthを決めなきゃいけないのって どうなんさ(´・ω・｀) 正しい方、マンドクセ。

回避方法

両方を同じ幅に揃えるのはムリかと思っていたけれど、ちゃんと方法がありますた。
widthと_widthでFirefox用とIE6用の指定をすれば いいだけ。

↑の具体例でいうと、幅を100pxにしたい場合

width: 80px;
_width: 100px;
padding-right: 10px;
padding-left: 10px;

とすれば おｋ。
_widthはIE4〜IE6にだけ適用されるそうで。
順番は必ずwidthが先で_widthが後。
後から書かれてる方が優先されるので、逆にしちゃうとIEでもwidthで指定した方のサイズになっちゃいまする。

IE7については この方法で ちゃんと表示されるのかはシラネ。
これ利用してスクリーンショット撮ってみる限りじゃ ちゃんとなってるっぽいけど。