よーしパパ、CSS3でdisplay:boxしちゃうぞー!と思ったらFirefoxが微妙でござったの巻

Firefoxさん

CSS3 で新しいボックスレイアウト - VERSIONFIVE を参考にしながら、display:boxを試したところ、Firefoxの挙動が非常に怪しかったのでメモ。(バージョンは3.6.4)

ベーシックな 親 > 子・子・子 でネストした要素

<div id="wrapper">
     <div class="child">hoge</div>
     <div class="child">fuga</div>
     <div class="child">hige</div>
</div>

boxレイアウトを適用

 #wrapper {
     display: -webkit-box;
     display: -moz-box;
}

Firefoxは、marginが適用されない?

/* なんでやねん! */
 #wrapper {
     display: -moz-box;
     margin: 0 auto;
}

中央に揃ってくれません。text-align: centerでも使えとおっしゃいますかね。自分は素直にdivを1枚挟むことにしました。

Firefoxは、なぜか.childに書いても有効

/* なんでやねん! */
 #wrapper .child {
     display: -moz-box;
}

有効というのは、本来は親をdisplay:boxすることで子が並びますが、子自身にdisplay:boxと書いてあっても親の中で子が並び揃うという意味です。マジカルな実装です。

確かに有効なんですが、もちろん.childの中のブロック要素に対しても、boxレイアウトが適用されるので使い物にはなりません。 もしかしてすると、このよく分からない実装が、marginが効かない現象に影響を与えているのかもしれません。謎。

そして、既出でした!!

[css]display:box;の挙動がブラウザによって違うみたい

さらにこちらのリンク先の参考サイトにも、もちろん似たような記述があったりで...。こうやって車輪の再発明は連なっていくのでしょう!! 終わり。