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

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

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

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

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

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

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