2007年1月アーカイブ

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

| コメント(0)

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

mini-height

| コメント(0)

mini-heightプロパティは

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

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

このアーカイブについて

このページには、2007年1月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2006年10月です。

次のアーカイブは2007年6月です。

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

ウェブページ

  • 連絡先
Powered by Movable Type 5.01