box-sizingで横幅の算出方法を指定する--FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008/04/14 18:35

各ブラウザでbox-sizingプロパティを利用する

 各ブラウザでbox-sizingプロパティを利用する場合、先行サポートということで「-moz-」などを付けて記述する。ただし、Operaだけは何も付けずに利用することが可能だ。

ブラウザごとのbox-sizingプロパティの記述形式
ブラウザbox-sizingプロパティの記述形式
Firefox-moz-box-sizing
Safari 3-webkit-box-sizing
Internet Explorer 8-ms-box-sizing
Operabox-sizing

 各ブラウザでの表示を揃える場合、以下のように「-moz-box-sizing」「-webkit-box-sizing」「-ms-box-sizing」「box-sizing」の4つの指定を併記する。

Firefoxでの表示 Firefoxでの表示
Safari 3での表示 Safari 3での表示
Operaでの表示 Operaでの表示
Internet Explorer 8(ベータ版)での表示 Internet Explorer 8(ベータ版)での表示
div	{
	width: 300px;
	border: solid 30px #ffaa00;
	padding: 30px;
	background-color: #ffff00;
	margin: 20px auto;
	}

div#content	{
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
	}

div#border	{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}
ブラウザで表示を確認する

 なお、Firefoxでは-moz-box-sizingの値を「padding-box」と指定して、パディングだけを横幅に含めて表示することも可能だ。ただし、「padding-box」という値は現在のCSS 3の勧告候補「Basic User Interface Module」では定義されていない。

Firefoxでの表示。上から順に「content-box」「padding-box」「border-box」で表示している Firefoxでの表示。上から順に「content-box」「padding-box」「border-box」で表示している
div	{
	width: 300px;
	border: solid 30px #ffaa00;
	padding: 30px;
	background-color: #ffff00;
	margin: 20px auto;
	}

div#content	{
	-moz-box-sizing: content-box;
	}

div#padding	{
	-moz-box-sizing: padding-box;
	}

div#border	{
	-moz-box-sizing: border-box;
	}
ブラウザで表示を確認する
記事の感想やご意見をコメントでお寄せください(CNET_IDログインが必要です)
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 読者投票
    いよいよ7月11日に売り出される「iPhone 3G」。今のところの購入予定は?

    投票受付期間:2008年7月7日 〜 2008年7月11日
  • » 投票しないで結果だけ見る