に
#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 使用不可