borderプロパティ

| コメント(0)
要素にborder指定したとき、 例えば、
テスト


#box{
width:100px;
border:solid #cccccc 10px;
}

という指定をすると、

IEではdivの幅は100pxのままでボーダーは内側に描かれるのに大して

Mozilla系では(Firefox1.07[Mozilla5.0]とOpera7.23で確認)
boxの外側にボーダーが描かれる、つまり全体として120pxになってしまう。

この問題を解決するためにはMozilla系に対して
box-sizingプロパティを指定する必要がある。

取り得る値は
content-box
border-box

content-box
デフォルトの値、つまり内容までをwidth,heightに含める。
border-box
つまり、内容とボーダーまでをwidth,heightに含める。

しかしbox-sizingプロパティはCSS3から使用可能なため
一部ブラウザでは使用できない。
(Firefoz1.07[Mozilla5.0]とNetscape7.1[Mozilla5.0]で使用できないことを確認)
ただ、Mosilla系ブラウザにはbox-sizingの先行実装の
-moz-box-sizingが使用できることがある。
というわけで

#box{
width:100px;
border:solid #cccccc 10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}

という記述の仕方でborderの仕様のクロスブラウザ化がされるようだ。

最後に確認したブラウザについて。

box-sizing
【WindowsXP SP2】Opera7.23 使用可能
【WindowsXP SP2】Firefoz1.07[Mozilla5.0] 使用不可
【WindowsXP SP2】Netscape7.1[Mozilla5.0] 使用不可
【WindowsXP SP2】InternetExploler6.0.29 使用不可

-moz-box-sizing
【WindowsXP SP2】Opera7.23 使用不可
【WindowsXP SP2】Firefoz1.07[Mozilla5.0] 使用可能
【WindowsXP SP2】Netscape7.1[Mozilla5.0] 使用可能
【WindowsXP SP2】InternetExploler6.0.29 使用不可

コメントする

このブログ記事について

このページは、masatoが2007年1月12日 11:05に書いたブログ記事です。

ひとつ前のブログ記事は「のバグ」です。

次のブログ記事は「.htaccess」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ

  • 連絡先
Powered by Movable Type 5.01