Blog

display:table-cellの中でimgのmax-width指定が効かなかったバグ

2016.01.05Cat:css3 デザイナー

最近、displayのtable,table-cellを使用する機会が増えてきていますが、使用していてあるバグに当たりました。

それはタイトルの通りなんですが、
display:table-cellのimgのmax-widthの指定が
chromeは大丈夫なんですが、iefirefoxでは無視されていました。。。

例えば以下のようなソースになります。

これだとmax-widthが無視されてしまうので、cssをひとつ調整すればOKです!

display:tableを指定している要素に、
table-layout: fixed;
を追加してあげるだけでOKです!

これでie,firefoxでもmax-widthが効くようになります。

便利なdisplay:tableですが、tableにすることによって効かないcssも出て来ちゃうので、
気をつけないといけないですね〜

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ