WEB掻っ穿じり

WEBデベロッパー備忘録とチャリ

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

  category:architect

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

comments powered by Disqus