<div>ボックス1</div> <div>ボックス2</div> <div>ボックス3</div> </div> CSS #ex ..." /> <div>ボックス1</div> <div>ボックス2</div> <div>ボックス3</div> </div> CSS #ex ...">

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS3のdisplay:box;でボックスを横並びにしたときの違和感と対策

CSS3を使ってボックスを横並びにするには、display: box; を使います。webkit(Safari、Chrome)と mozilla(Firefox)とでは指定の仕方が異なり、それぞれ display: -webkit-box; と display: -moz-box; のように指定します。

試しに、下記のようなコードを書きます。

HTML

<div id="ex">
    <div>ボックス1</div>
    <div>ボックス2</div>
    <div>ボックス3</div>
</div>

CSS

#ex {
	display: -moz-box;
	display: -webkit-box;
	width: 300px;
	padding: 15px;
	border: 1px solid #ccc;
}
#ex div {
	width: 88px;
	height: 50px;
	padding: 5px;
	border: 1px solid #666;
	background-color: #999;
}

これを、FirefoxとSafariで見ると次のように表示されます。

display_box_1

なんと、ボックスの幅が異なって表示されてしまいました。これは、Firefoxがボックスの width を padding と border を含めた値として表示しているのに対し、Safariはボックスの width を padding と border を含まない値として表示しているためと思われます。height についても同様。XHTMLとCSSでのコーディングに慣れていると、感覚的にはSafariがしっくりきます。

この問題を解決する方法を調べていると、CSS3には box-sizing というプロパティが追加されていることがわかりました。これは、content-box(paddingとborderを含まない)と border-box(paddingとborderを含む)を指定することができます。

というわけで、下記のようにwebkitに対してbox-sizingを設定してみます。

#ex div {
	-webkit-box-sizing: border-box;
	width: 100px;
	height: 60px;
	padding: 5px;
	border: 1px solid #666;
	background-color: #999;
}

すると、FirefoxとSafariで表示をそろえることができました。

display_box_2

しかし、これは違和感があります。最初はmozillaに対して、-moz-sizing: content-box; と指定してみたのですが、なぜか効かずに幅が変わりませんでした。なので仕方なくwebkitをmozillaに合わせるようにしてみました。

このあたりの仕様はまだちゃんと理解できていないのですが、ひとまずdisplay: box;でボックスを横並びにした場合の注意点としてメモしておきます。

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。