width + padding + border IE問題検証

http://d.hatena.ne.jp/neuromancer_sho/20091109/1257759022 でちょろっと書いた件。
divに対してwidthとpaddingを設定するとブラウザ間で違いが出てしまう。

<style>
.box1 {width:20em; padding:2em; margin:1em; background:red;}
.box2 {width:10em; padding:2em; margin:1em; background:red;}
</style>
<div class=box1>ああああああああああああああ</div>
<div class=box2>ああああああああああああああ</div>

IE

Chrome

外側にもうひとつdivを作り、そっちにwidthを設定すれば同じ見た目になる。marginが必要なら外側に設定すれば良い。

<style>
.wbox1 {width:20em; margin:1em;}
.wbox2 {width:10em; margin:1em;}
.box1 {padding:2em; background:red;}
.box2 {padding:2em; background:red;}
</style>
<div class=wbox1>
<div class=box1>ああああああああああああああ</div>
</div>
<div class=wbox2>
<div class=box2>ああああああああああああああ</div>
</div>

IE

Chrome

widthとmarginの共存にも問題が出ると思ったが、それは大丈夫だった。
borderもpaddingと同じ問題が発生するので、borderが必要な時は内側のdivに付ければOK。