参考サイト: CSS3 でのレイアウトで使える box 系プロパティのまとめ | CSS Lecture
例えばこんなCSS指定とタグを書くと、
<style>
#container {
width: 100%;
display: -webkit-box;
display: -moz-box;
}
#left {
border:1px solid red;
width: 100px;
}
#center {
border:1px solid green;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#right {
border:1px solid blue;
width: 150px;
}
</style>
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
対応ブラウザでは以下のようになるわけです(生でタグ書いてるので対応してればきれいに横並びになってるはずです)。
left
center
right
しかし、これがFirefoxでうまくいかないときがあります。
次のように、親要素にposition指定をしてみます。メニューバーをdisplay: boxで作ってposition: fixedで、なんて使い方とかあると思います。
上で出した例の#containerにposition: fixedを入れてみます。
#container {
width: 100%;
position: fixed; /* add */
display: -webkit-box;
display: -moz-box;
}
すると、先ほどは横に揃っていた子要素達が、Firefoxではこうなります(今度は生タグじゃなくて画像)。
SafariやChromeの場合、横並びのままなんですが、Firefoxだとdisplay: -moz-boxが効いてません。
理由はわかりませんが、Firefoxでは親要素(「僕の子らは同じ1つのbox(すなわち親である私)内に収まりますよ」と指定しているやつ=本エントリでは"id=container")にrelative以外のposition指定をすると、boxとして揃ってくれません。Firefox 3.6.14でも、Firefox 4 beta2でも、この現象はでます。
これを回避するには問題となってるposition指定を外すことです。でもそれだと本来のposition(fixedとかabsoluteとかで指定したかった位置)が意味なくなります。
そこで、こんな風にさらに親要素をひとつつけてやって、それにpositionの役割を果たしてもらうことで、うまくいくようになります。
<style>
#parentBox {
position: fixed;
}
#container {
width: 100%;
display: -webkit-box;
display: -moz-box;
}
#left {
border:1px solid red;
width: 100px;
}
#center {
border:1px solid green;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#right {
border:1px solid blue;
width: 150px;
}
</style>
<div id="parentBox">
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</div>
…で済めばいいんですが、サイトのデザインによっては、さらにいろいろ微調整が必要になることも考えられます。widthとか。そこはまあがんばってください(投げ)。
icotileのFirefox対応検討中、この現象に遭遇しました。何が影響してるか検証した結果positionと判明したので、ならばと回避策を考えてみた次第です。
icotileとは:
Twitter のフォローしている人/されている人やリストを iTunes のような操作感で管理でき、また各ユーザーに対して自分だけのメモも残せる Web アプリケーション。Developed by @ogaoga / Designed by @piyotori
ってことで、最近icotileのデザイン周りでCSS3あれこれ調べたり、ビジュアル的なデザイン面以外でも普通にJavaScriptのロジック部分も書いたり、やってます。(そしてCSS3楽しーってなると勢いあまってシャルロッテとか作るわけです(前回エントリ参照))