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

Firefoxさん

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

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

     
hoge
     
fuga
     
hige

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;の挙動がブラウザによって違うみたい

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

---