WEB掻っ穿じり

WEB備忘録とチャリとカメラ

Firefoxだけtable内の画像スタイル max-widthが効かない現象

  category:web

RWDサイト制作で、意外にもFirefoxだけスタイルが効かない現象の対策です。

tableタグ内のセル、tdタグを親要素とした画像(imgタグ)のリキッドデザイン、レスポンシブデザインで欠かせないスタイル要素、[max-width:100%]がFirefoxだけ無視されます。

そこで、親要素のtableタグのスタイルtable-layoutプロパティにfixedの値を与えてやります(デフォはauto)。
tableを画像が入る列幅(tdタグ[table-cell])を固定レイアウトにすることで、孫要素のimgタグが可変の振る舞いをするようになります。

※必ず親要素のtableの横幅は可変でなくてはなりません。(width:100%等)

html

css

table {
  width: 100%;
  table-layout:fixed;
}
table td img {
  max-width: 100%;
}

サンプルページ(Firefoxでご確認ください。)

何てことは無いことなんですが、こういうことで結構時間を取られたりしちゃうんですよね。
しかもIEなら兎も角、Firefoxでこんなバグみたいなのあるのかって意外でもあります。