FireFoxのボーダーの解釈が分からない

最終更新日: 2010-08-24
投稿日: 2008-11-17

小一時間悩まされた＆意味が分からないので書いておきます。

ホームページを制作中、ブラウザの端まで線を引こうと思い、スタイルシートでボーダーの設定しました。IEだと上手く表示できるのですが、Firefoxだと隙間が空きます・・・。
以下がそのHTML。（body要素のスタイルにはmargin: 0px; padding: 0px;を設定）
div要素の中にdivを入れてmarginを10px指定しています。

<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>

表示結果が下の通り。

Firefoxだと10px分の隙間が出来てしまいます。

これがそういう仕様であれば仕方ないのですが、スタイルシートに「border」の一括指定、もしくは「border-top」を追加すると今度は下のようにちゃんと上まで線が引かれます。

<div style="margin: 0px auto; padding: 0px; border: 1px solid black; width: 250px;">

<div style="margin: 10px;">テスト</div>

</div>

一体これはどういう解釈なのかしら？という疑問です。

[2009-09-17　追記]
どうやらこれはFireFoxではなくIEの方がバグらしいです。（コメントを頂きました）
しかし、どちらかというと私的にはIEの解釈の方がすんなり受け入れる事が出来るのですが…(^－^;

タグ: firefox border 違い
トラックバックURL

ayahana さん：
2008/11/17 月曜日 14:46:57

はじめてコメントいたします。
私もＦｉｒｅｆｏｘでグーグルにログインできない？に悩まされたので
何か妙案をと思いブログを探していたところ、
こちらにたどりつきました。

私もウェブ製作中ＩＥとＦｉｒｅｆｏｘのＣＳＳに苦しんでおりますゆえこのようなバグ（？）情報があると助かります。
ありがとうございました。
akahoshi さん：
2008/11/17 月曜日 15:55:33

＞ayahanaさん
コメントありがとうございます。

「そういう事がありました」と問題を提起しているだけで何ら解決策を示しているわけではないのですが、そんな事もあるんだと心に留めておいていただいたら幸いです。

ただ、出来るだけシンプルに再現したつもりですが、私の書き方が悪い可能性もありますのでその際はご容赦ください。