Firefoxでtableが絡むと、max-widthが効かないんだよお、の時の対処法
こんばんは。Web&グラフィックデザイナーのヨミコです。
俺のFireFoxがこんなにバグる訳がない
そう思っていた頃もありました。
そんな訳で、
レスポンシブ対応のサイトを作っていたんですけど、こんな事象が発生。
tableの中の画像にmax-widthが効かずに、大きさが可変にならず、ブラウザの幅を狭めても、縮小されない。
噂に寄ると「display:table-cell;」でも同じ様な事象が発生する様です。
参考リンク：
検索であまり引っかからなかったので、同じところでハマってる方の役に立つ様に記事にしました。
ちなみに「メディアクエリ 効かない」
で検索してましたが、中に出て来なくて、
「max-width Firefox」
でhitしました。
わーい良かった。
「レスポンシブ 画像の縮小」
等でも検索した気がします。
という訳で同じ箇所でハマッてしまった人が、ここにたどり着いて解決するといいな。
具体的にどうするの
親要素であるtableにcss上でwidth: 100%;
table-layout:fixed;
を入れるだけでおK。
詳しくは下記をどうぞ。
私は今回これで直った！！
検索すると他にも出て来るのでそちらもご参照下さい。
bootstrapを使用していたので、そちらとの兼ね合いかな？と思いましたがどうやら関係ない様です。
IEは、もう…まあ、うん…
Firefoxで崩れました、と書きましたがIEでも崩れました。
ちなみに上記の事象が発生したverは、はInternetExplorer11、Firefox44でした。
ご参考まで！
ではまた。
お仕事etcお問い合わせ先(制作実績お送りします)：yomikodesign@gmail.com
Facebook友人申請お気軽にどうぞ。スパムでなければ基本承認します。
Twitterお気軽にフォローどうぞ！基本リフォローします。
