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

posted： 2015-01-26　　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でこんなバグみたいなのあるのかって意外でもあります。

• 
• 
• 
• 0
•