IE11バグ display table, table-cell 内で max-width が効かない

IE11… またお前か！
max-widthのバグが多いですねw

display: table, display: table-cell の中にある img タグのmax-width: 100% が無視されて、要素からはみ出したりしてしまう問題。

<div class="table">
  <div class="table-cell">
    <img class="max-width-100per">
  </div>
</div>

table-layout: fixed を使うと max-width が効く

display: table を持っている要素に table-layout: fixed を設定すると、table-cell 中にある画像の max-width が有効になる。

‘table-cell’ 内に inner のdiv 要素などを置いても画像の max-width は無視されてしました…

サンプル

See the Pen IE11 max-width un available in display: table, table-cell by KIKIKI (@chaika-design) on CodePen.

IE 滅ぶべし！

---

[参考]

• IE11でimg要素にmax-width: 100%;が効かない場合の対処法 - E-riverstyle Vanguard

セントールの悩み(1)【特典ペーパー付き】 (RYU COMICS)