ホームページ制作実績

赤星

記事表示ここから

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

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

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

HTML:
  1. <div style="margin: 0px auto; padding: 0px; border-left: 1px solid black; border-right: 1px solid black; width: 250px;">
  2.  
  3. <div style="margin: 10px;">テスト</div>
  4.  
  5. </div>

表示結果が下の通り。

Firefoxでのボーダーの解釈

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

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

FireFoxでのボーダーの違い

HTML:
  1. <div style="margin: 0px auto; padding: 0px; border: 1px solid black; width: 250px;">
  2.  
  3. <div style="margin: 10px;">テスト</div>
  4.  
  5. </div>

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

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

記事表示ここまで
リンクここまで

この記事のコメント・トラックバックRSS

コメント

  • ayahana さんより:
    2008-11-17 14:46:57

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

    私もウェブ製作中IEとFirefoxのCSSに苦しんでおりますゆえこのようなバグ(?)情報があると助かります。
    ありがとうございました。

  • akahoshi さんより:
    2008-11-17 15:55:33

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

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

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

コメント・トラックバック ここまで

トラックバック用URL:

コメントフォーム

コメント入力

コメントフォーム
※管理人にのみ公開されます

記事のリンク先URL:http://www.is-p.cc/staff-blog/akahoshi/firefox%e3%81%ae%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e3%81%ae%e8%a7%a3%e9%87%88%e3%81%8c%e5%88%86%e3%81%8b%e3%82%89%e3%81%aa%e3%81%84/465

空白
ページのトップに戻る
空白