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

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

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

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

Firefoxでの表示

Safari 3での表示

Operaでの表示

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」で表示している

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;
	}

※ブラウザで表示を確認する