Firefox 19.0 でのレイアウト調整

2013年2月19日に Firefox 19.0 が公開されました。このバージョンにて、当サイトのレイアウトを確認しました。 Webkit 系ブラウザを中心に、CSS Flexible Box レイアウトにチャレンジして […]

2013年2月19日に Firefox 19.0 が公開されました。このバージョンにて、当サイトのレイアウトを確認しました。

Webkit 系ブラウザを中心に、CSS Flexible Box レイアウトにチャレンジしていますが、Firefox では、インラインブロックを利用することによって同一のレイアウトで表示されるようになりました。

    display: inline-block ;

なお、Firefox 18.0 より about:config ページにおいて、”layout.css.flexbox.enabled” を true に変更することによって CSS Flexible Box が有効となります。ただし、現時点で Firefox は単一ラインの flexbox のみサポートしています。

当サイトでは、マルチラインを前提としたレイアウトで構想しているため、Firefox で CSS Flexible Box を有効とした場合に、構想とは異なるレイアウトで表示されてしまっているようです。

    flex-wrap: wrap ;
    justify-content: center ;

この部分の CSS の記述が Firefox において予定と違った表示となっているように思われます。

他のブラウザとの調整において、回避する策が思い浮かばないため、この状態のまま様子を見させていただきたいと思います。

Firefox のデフォルトの設定において、インラインブロックが有効となり、構想したレイアウトと同じ表示となっています。Firefox については注意深く確認を続けて、対応を考えていきたいと思います。