CSSでmarginを指定すると、表示の仕方がブラウザによって変わってしまいます。

質問

はじめまして、CSS初心者です。

お聞きしたいことがあります。

---CSS---
body{
　　margin:0px;
　　padding:0px;
}

#formbox{
　width:750px;
　height:155px;
}

#box01{
margin-left:30px;
width:280px;
height:50px;
}

---HTML---
<div id="formbox">
<div id="box">ほげほげ</div>
</div>

というHTMLをIE6.0とfirefox1.5で表示させたときに、
<div id="box">のmargin-leftがIE6.0だと60pxぐらいになってしまいます。firefoxでは、30pxとられているようなのですが…。

IE6.0とfirefox1.5で誤差が生じしてしまうのはなぜなのでしょうか。

どなたかご教授お願いできないでしょうか。

よろしくお願い申し上げます。

回答No.1

trick_fate · ベストアンサー

どうも。
ブラウザによって、表示形式は若干異なります。特に、文字間の間や行間、ボーダーの幅などは若干ですが、違います。しかし、見た目に大きく崩れる事はありません。
今回の件は、ソースをコピペして実行してみたところ、問題はありませんでしたよ。IEでもFirefoxでも同じように表示されました。
しかし、気になる事が1つある。それは、HTMLにおいて、id="box"ではなく、id="box01"でしょ？
ま、ここに記述する時に誤った事であって、実行する時には間違っていなかったと思いますが。

お礼

早速のお返事ありがとうございました。
若干、実際のソースと違う部分はあったのですが、同じように表示されましたか。
floatを使用しているとき、marginを指定すると2倍になるというIEのバグが原因でした。
ちゃんと記述せず申し訳ありませんでした。

そうですね、"box01"ですね。
次回から質問するときは、気をつけて書き込もうと思います。

ありがとうございました。