技術情報

要素に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 : 11:05 | コメント (1257)

2007年01月11日

• のバグ

【Windows XP SP2】
IE6.02900
li要素にwidthを指定すると、listが本来つくべき文の頭から上下にずれてしまう。

投稿者 masato : 20:42 | コメント (540)

mini-height

mini-heightプロパティは

【Windows XP SP2】
IE6.02900
では効かないことを確認

Opera7.23
Firefox1.0.7
Netscape7.1
では効くことを確認

投稿者 masato : 10:28 | コメント (1449)