小一時間悩まされた&意味が分からないので書いておきます。
ホームページを制作中、ブラウザの端まで線を引こうと思い、スタイルシートでボーダーの設定しました。IEだと上手く表示できるのですが、Firefoxだと隙間が空きます・・・。
以下がそのHTML。(body要素のスタイルにはmargin: 0px; padding: 0px;を設定)
div要素の中にdivを入れてmarginを10px指定しています。
[html]
<div style="margin: 0px auto; padding: 0px; border-left: 1px solid black; border-right: 1px solid black; width: 250px;">
<div style="margin: 10px;">テスト</div>
</div>
[/html]
表示結果が下の通り。
Firefoxだと10px分の隙間が出来てしまいます。
これがそういう仕様であれば仕方ないのですが、スタイルシートに「border」の一括指定、もしくは「border-top」を追加すると今度は下のようにちゃんと上まで線が引かれます。
[html]
<div style="margin: 0px auto; padding: 0px; border: 1px solid black; width: 250px;">
<div style="margin: 10px;">テスト</div>
</div>
[/html]
一体これはどういう解釈なのかしら?という疑問です。
[2009-09-17 追記]
どうやらこれはFireFoxではなくIEの方がバグらしいです。(コメントを頂きました)
しかし、どちらかというと私的にはIEの解釈の方がすんなり受け入れる事が出来るのですが…(^-^;