最近、displayのtable,table-cellを使用する機会が増えてきていますが、使用していてあるバグに当たりました。
それはタイトルの通りなんですが、
display:table-cellのimgのmax-widthの指定が
chromeは大丈夫なんですが、ieとfirefoxでは無視されていました。。。
例えば以下のようなソースになります。
|
1 2 3 4 5 | <div class="photo"> <figure> <img src="images/sample.jpg" alt=""> </figure> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 | .photo { display: table; width: 200px; } .photo figure { display: table-cell; } .photo figure img { max-width: 100%; height: auto; } |
これだとmax-widthが無視されてしまうので、cssをひとつ調整すればOKです！
|
1 2 3 4 5 6 7 8 9 10 11 12 | .photo { display: table; width: 200px; table-layout: fixed; } .photo figure { display: table-cell; } .photo figure img { max-width: 100%; height: auto; } |
display:tableを指定している要素に、
table-layout: fixed;
を追加してあげるだけでOKです！
これでie,firefoxでもmax-widthが効くようになります。
便利なdisplay:tableですが、tableにすることによって効かないcssも出て来ちゃうので、
気をつけないといけないですね〜
