レンタルサーバー比較メモ

レンタルサーバーメモブログ

 

display:boxがFirefoxで効かない!

   

display:boxを利用するとfloatを利用しなくても横並びができるということを知って利用してみたところ「Firefoxだけ横並びにならなかった」り、「Firefoxだけ指定した順番に並ばなかったりした」ので「Firefoxだけcssが効かない!」と思考錯誤したのでメモっておきます。

display:boxが効かない原因を探す

firefoxだけdisplay:boxが効かない原因をネットで探したのですが、明確な原因は分かりませんでした。
仕方ないので「floatやclearでレイアウトするかな・・・」と一時は考えたのですが、display:boxを知ってしまうとfloatやclearでレイアウトするのは正直スマートな方法ではないと感じてしまうようになってしまい、何とか解決したいと自分の記述したコードとネットに書いてあるコードを何度も見比べてみたのですが、どうしても違いが見つかりませんでした。

とりあえず簡単なhtmlとcssで実験する

原因を調べるために簡単なhtmlとcssを実験用に作成しました。
Firefox用HTMLの実験サンプル

<div id="box">
<div id="left">左だけど2番目に表示したいよ</div>
<div id="center">真ん中だけど3番目に表示したいぞ。</div>
<div id="right">右だけど1番目に表示したいねん。</div>
</div>

Firefox用CSSの実験サンプル(display:boxが効いていない例)

#box{
-moz-box; /*この記述だけで横並びになると考えていました*/
width:100%;
}
#left{
-moz-box-ordinal-group: 2; /*並び順を2番目にしたい*/
}
#center{
-moz-box-ordinal-group: 3; /*並び順を3番目にしたい*/
}
#right{
-moz-box-ordinal-group: 1; /*並び順を1番目にしたい*/
}

著者は初めて新しいコードを記述する時には読みやすさを重視してコードを書いています。

とりあえず上記のコードを基本に思考錯誤したのですが、

  1. 横並びにならず、縦表示のまま
  2. 指定した順番ではなく、記述した順番のまま

という結果になりました。

「-moz-box」というコードが用意されているので著者のコードに問題があると考えてネットで調べたコードを追加するなどしていろいろと試したのですが、全く変化がありませんでした。

display:boxで横並びになった!

いろいろとcssコードを追加しすぎたので「一度、元のシンプルなコードに戻そう」と思い、上記のコードに戻してゼロから始めてみました。

シンプルなコードに戻した後、試しにdisplay:boxを反映させたい部分のcssのコードからコメントとスペースを全て削除してみました

削除しただけではdisplay:box;が反映されませんでしたが「box-orient: horizontal;」という記述を追加することにより、横並びにすることができました。

#box{
-moz-box;
width:100%;
box-orient: horizontal;/*追加した記述*/
}

これで横並びレイアウトにすることができました。

しかし、指定した順番通りには並んでいません。

-moz-box-ordinal-groupで指定した順番になった!

指定した順番で並べるには「-moz-box-ordinal-group:」が効いていないと順番どおりにならんでくれないのですが、短いコードなので「問題点なんて見つけようがないでしょ?」と途方に暮れていたのですが筆者はphpを記述する時にスペースに引っかかて上手くphpを実行できなかったことを思い出しました。

そこでこちらでもcssからスペースを削除し、ついでにコメントも削除して下記の様に記述しなおしました。
【記述しなおしたcss】

#left{
-moz-box-ordinal-group:2;
}
#center{
-moz-box-ordinal-group:3;
}
#right{
-moz-box-ordinal-group:1;
}

上記のように修正したところ指定した順番で表示することができました!

まとめ:Firefoxでdislpay:boxを効かせる方法

Firefoxでdislpay:boxを機能させるには、

  1. box-orient: horizontal;」を記述しないと横並びにならない
  2. 「-moz-box-ordinal-group:」で順番どおりに表示するにはcssにスペースやコメントを記述しない

ということになりました。
(著者の場合です)

Chromiumでは問題なくdisplay:boxは効いていたのでFirefox特有の問題なのかもしれませんが「解決するのに約3日もかかった」ので忘れないうちにメモっておきました。

全ての環境に当てはまるわけではないと思いますが、どなたかのお役に立てたら幸いです。(^ ^)

 - CSS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
display:flexでカラムの並び順を指定する

カラムの並び順を指定しようとしてdisplay:boxがFirefoxで効かない …