ヨミコのデザイン工房

デザイナー&ブロガーのヨミコが、 WEB制作の事を書いたり書かなかったり。

Firefoxでtableが絡むと、max-widthが効かないんだよお、の時の対処法

こんばんは。Web&グラフィックデザイナーのヨミコです。

f:id:yomikodesign:20160208231947p:plain

俺のFireFoxがこんなにバグる訳がない

俺の妹がこんなに可愛いわけがない。 ハッピーエンド HDコンプ! BOX

俺の妹がこんなに可愛いわけがない。 ハッピーエンド HDコンプ! BOX

そう思っていた頃もありました。

そんな訳で、
レスポンシブ対応のサイトを作っていたんですけど、こんな事象が発生。

tableの中の画像にmax-widthが効かずに、大きさが可変にならず、ブラウザの幅を狭めても、縮小されない。

噂に寄ると「display:table-cell;」でも同じ様な事象が発生する様です。

参考リンク:

blog.looseknot.jp

検索であまり引っかからなかったので、同じところでハマってる方の役に立つ様に記事にしました。

ちなみに「メディアクエリ 効かない」
で検索してましたが、中に出て来なくて、
「max-width Firefox」
でhitしました。

わーい良かった。

「レスポンシブ 画像の縮小」
等でも検索した気がします。

という訳で同じ箇所でハマッてしまった人が、ここにたどり着いて解決するといいな。

具体的にどうするの

親要素であるtableにcss上でwidth: 100%;
table-layout:fixed;
を入れるだけでおK。

詳しくは下記をどうぞ。
私は今回これで直った!!

birdwing3.com

検索すると他にも出て来るのでそちらもご参照下さい。

bootstrapを使用していたので、そちらとの兼ね合いかな?と思いましたがどうやら関係ない様です。

IEは、もう…まあ、うん…

Firefoxで崩れました、と書きましたがIEでも崩れました。

f:id:yomikodesign:20160208231945j:plain

ちなみに上記の事象が発生したverは、はInternetExplorer11、Firefox44でした。

ご参考まで!

ではまた。


お仕事etcお問い合わせ先(制作実績お送りします):yomikodesign@gmail.com

Facebook友人申請お気軽にどうぞ。スパムでなければ基本承認します。

Twitterお気軽にフォローどうぞ!基本リフォローします。