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

2014/12/22 CSS, HTML

とあるスマホ案件にて、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%;
}