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