Firefoxでmax-widthが効かない?バグ?仕様?

とあるスマホ案件にて、html制作中に出くわした現象の備忘録です。

現象

画像とテキストが横並びになるレイアウトで、画面サイズに合わせて画像のwidthを可変させるために、[display:table]と[display:table-cell]を組み合わせてCSSを記述していました。
Chrome、SafariのWebkit系でのブラウザチェックでは問題なかったのですが、Firefoxではなぜかmax-widthが効いていないようで、画像サイズが縮小されずに原寸大で表示されてしまっていました。

解決策

どうやら display:table-cell を使用している事が原因のようで、このプロパティを使用する時には、親要素の display:table をしている要素に table-layout:fixed を指定する事で回避できるようでした。

HTML

<div class="table">
  <div><img src="images/dummy_s.png"></div>
  <p>ダミーテキストダミーテキストダミーテキスト。</p>
</div>

CSS

.table {
  display: table;
  table-layout: fixed;
}
.table div,
p {
  display: table-cell;
  vertical-align: middle;
}
.table div img {
  max-width: 100%;
}

表示サンプル

サンプルhtml

Firefoxでmax-widthが効かない?のサンプル

現状のスマホ案件は、ほとんどの場合でFirefoxは対象外になりますが、これから先、ひょっとしたらFirefoxOSが流行して制作側も対応を迫られる日がくるかもしれません。。。
そんな日のためにも、このような現象がある事を覚えておくとよいかもしれませんね。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする