CSSのボックスのブラウザごとの解釈の違いについて

質問

見出し（h3）と内容をそれぞれ罫線で囲んだものをCSSで作るため、以下のCSSを作りました。
IEでもFirefoxでも思ったように表示されました。
見出しと内容部分のwidthとborderとpaddingを足した数値を同じにしたので、IEで見出しと内容部分の幅が同じに表示されるのはいいのですが、Firefoxでも幅が同じにに表示されるのはなぜでしょうか？widthだけの幅は違うので、見出し(h3）の方が2px狭く表示されると思ったのですが・・・
そもそもの考え方が間違っているのでしょうか。
ご教授のほど宜しくお願い致します。

h3 {
font-size: 13px;
padding: 3px 3px 3px 5px;
border-top: 1px solid #009933;
border-right: 1px solid #009933;
border-left: 5px solid #009933;
margin: 0px;
width: 286px;
}
p {
font-size: 11px;
border: 1px solid #009933;
margin: 0px;
padding: 5px;
width: 288px;
line-height:130%;
}

回答No.1

izumi1226

ブラウザやOSによって解釈が違います。たとえば、同じIEでもWindowsとMacでは表示が天と地程に違う場合があります。

以下のサイトは以前別の質問に載っていた物ですが、参考になると思います。

参考URL：

http://www.divlayout.com/index.html

お礼

ありがとうございます。

現在勉強中ですが、まだまだ先は遠い！と実感します(^_^.)が、早速教えていただいたサイトを拝見させていただきます。ありがとうございました。