検索しても誰も言及していなかったので。

タイトル通りなんですが、floatを使わずにカラムが組めたりして便利と噂のdisplay: boxですが、こいつを使ってboxを並べるとFirefoxでcontent-boxが効きません。

そんな訳で検証。

borderもpaddingも指定していないデフォルトのソースはこんな感じ。

#leftBox_c {
width: 100px;
background: #cbf1fa;
height: 100px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box; /*ちゃんと指定してます*/
box-sizing: content-box;
}

#leftBox_b {
width: 100px;
background: #cbf1fa;
height: 100px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#rightBox_c {
width: 100px;
background: #ffebea;
height: 100px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box; /*ちゃんと指定してます*/
box-sizing: content-box;
}

#rightBox_b {
width: 100px;
background: #ffebea;
height: 100px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

<h1>content-box</h1>
<div id="box">
<div id="rightBox_c">right</div>
<div id="leftBox_c">left</div>
</div>
<h1>border-box</h1>
<div id="box">
<div id="rightBox_b">right</div>
<div id="leftBox_b">left</div>
</div>

すると以下のように表示されます。
尚、Google Chromeと書いてますが、webkitの方がよかったですね。

それぞれのboxにborder:10pxを追加

はい、Firefox側には適応されませんね。

borderのかわりにpadding:10pxを追加

やっぱり、だめです。

もうborder:10px、padding:10px両方追加

はい、当然駄目です。
以上のように、display: boxを使うとFirefoxでcontent-boxが効きません。

解決策

そういったわけで、display: boxを使った場合でもFirefoxでもcontent-boxが効いた風に簡単にするには、ありがちですが、同サイズのdivを入れ子してやります。正直あんまり気に入らない手段ですがね。

ソースとしてはこんな感じ。

#leftBox_c {
border: 10px solid #ff3399;
padding: 10px;
width: 100px;
background: #cbf1fa;
height: 100px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}

#leftBox_b {
border: 10px solid #ff3399;
padding: 10px;
width: 100px;
background: #cbf1fa;
height: 100px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

#rightBox_c {
border: 10px solid #03a6e3;
padding: 10px;
width: 100px;
background: #ffebea;
height: 100px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}

#rightBox_b {
border: 10px solid #03a6e3;
padding: 10px;
width: 100px;
background: #ffebea;
height: 100px;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.inLeftBox { /*これ追加*/
width: 100px; /*親と同じサイズ指定*/
height: 100px;　/*親と同じサイズ指定*/
background: #cbf1fa;
font-size: 12px;
}

.inRightBox { /*これも追加*/
width: 100px;　/*親と同じサイズ指定*/
height: 100px;　/*親と同じサイズ指定*/
font-size: 12px;
background: #ffebea;
}

<div id="box">
<div id="rightBox_c">
<div class="inRightBox"><!--追加した子div-->
border: 10px</div>
</div>
<div id="leftBox_c">
<div class="inLeftBox"><!--追加した子div-->
border: 10px</div>
</div>
</div>
<div id="box">
<div id="rightBox_b">
<div class="inRightBox"><!--追加した子div-->
border: 10px</div>
</div>
<div id="leftBox_b">
<div class="inLeftBox"><!--追加した子div-->
border: 10px</div>
</div>
</div>

すると、以下のように見えます。

見て頂くとわかりますが、これだとFirefoxのcontent-boxに関する問題は解決しますが、当然の如くFireforでのborder-boxでもcontent-boxと同じになりますし、webkitでのborder-boxでは著しく崩れてしまうのでお気をつけを。

おまけ

最後に、ここまでで気付いた方もいるかもしれませんが、webkitではサイズが大きいとその分外にはみ出ますが、Firefoxではboxがそのまま大きくなります。 日本語が下手で何言ってるかよくわからないので、以下で実際ご覧ください。

まぁ、こんな感じです。

そういった訳で、display: boxを使ってboxを並べる場合にはご注意ください。

以上を自分の目でブラウザでちゃんと確認したいという方は→こちら