CSSレイアウト崩れの原因 - ブラウザによる「border」の解釈の違い

罫線を引く「border」もブラウザにより解釈が異なる。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

CSSレイアウト崩れの原因 - ブラウザによる「border」の解釈の違い

widthpaddingを同時に指定したときほど大きな影響は与えにくいのですが、それと同様にブラウザによって解釈がことなるものがあります。

それが「border」で指定した罫線の位置です。

IE6ではボックスの内側に線が引かれ幅が変わらないのに対し、IE7、Firefoxではボックス外側に線が引かれることで幅が「指定した幅+罫線の太さ」に変化します。

ブラウザによるborderの解釈の違い

例えば、500pxのボックスの左右に10pxずつの罫線を引いた場合、IE6では幅500px、内側の有効幅480pxになるのに対し、IE7、Firefoxでは幅520px(内側の有効幅は500pxで変わらず)に変わってしまうことになります。

たとえ1pxでも、幅の合計値が外枠の幅を超えてしまうと崩れが生じてしまいます。また、非常に小さな単位なので、崩れてしまったときに原因が見つけにくかったりしますので、ブラウザによる「border」の解釈の違いも頭に入れておきましょう。

なお、borderを指定する場合は、あらかじめ罫線分を加えた幅を指定し、その内側に入れたボックスに罫線を引くことで、IE6、IE7、Firefoxどのブラウザでも崩れなくなります。また、borderを使わず、背景画像を利用して罫線を引くのもひとつの方法です。