IEバグ inline-block 内の要素に max-width が効かないにハマる

コーディングをしていて IE で崩れていると連絡を受けてしまいました。
IE11のサポートしてたのですが、まぁ流石にもうIEでも大丈夫だろうと思ってたら、まさかIE6時代のようにバグに遭遇してしまいました。
マイクロソフトを信じたのが間違いだった...

発生していたバグ: inline-blockが親要素を突き破ってしまう例

inline-blockで横並びにした要素内の画像が親要素の幅を無視して表示されてしまっていた。
f:id:kikiki-kiki:20170707021555p:plain

HTML

div(class="inline-block width200px")
  div(class="inline-block")
    img(src="width 300px の画像")

div(class="block width200px")
  div(class="inline-block")
    img(src="width 300px の画像")

CSS

.block
  display: block
.inline-block
  display: inline-block
.width200px
  width: 200px
img
  max-width: 100% // width: 100% か max-width: 100% が無いと要素を突き破る
  height: auto

このようにwidthが200pxに指定された要素の中に、inline-block要素が入り、その中に200pxより大きな300px幅の画像が入るような構成の場合、Chrome, Safari, Firefoxではmax-widthが効き囲っている要素のwidthに画像が縮小されますがが、IE11はボックスは200pxのまま、inline-blockは画像幅の300pxになり親要素を突き破ってしまいます。

これは、画像のwidth、max-widthを指定してない時の表示と同じ感じでした。

IE 11 inline-block が中の要素の max-width: 100% が効かず親要素のwidth指定を無視してしまうっぽい

どうやらIE11ではmax-widthが指定された要素の親にinline-blockが指定されている時、親であるinline-block要素にwidthの指定がないと、例えinline-block要素の親要素にwidthが指定されていてもmax-widthが効かずこの幅を無視して突き破ってしまう問題があるようです。

解決方法 1. 画像の max-width:100% を辞めて、width: 100% にする

例えばレスポンシブなものとかで画像が拡大されてしまってもOKなら画像の max-width:100% を width:100% に変更するのが簡単です。

div(class="inline-block width200px")
  div(class="inline-block")
    img(src="width 300px の画像") ← width: 100% にする

div(class="block width200px")
  div(class="inline-block")
    img(src="width 300px の画像") ← width: 100% にする

解決方法 2. inline-block に width の指定をする

表示幅が決まっているなら画像の親のinline-block要素にwidthの指定をするのが簡単です。

div(class="inline-block")  ← width 指定無くてもOK
  div(class="inline-block") ← この要素にwidthを指定
    img(src="width 300px の画像")

div(class="block")   ← width 指定無くてもOK
  div(class="inline-block") ← この要素にwidthを指定
    img(src="width 300px の画像")

※ widthの指定は 100% でもOKでした。

解決方法 2. 親要素を display: inline-block でないものにする

画像を囲っている要素の display: inline-block を display: block、display: inline にした場合も画像のmax-widthは親の親要素の指定に準拠して表示されました

div(class="inline-block width200px") 
  div(class="block") ← この要素のdisplayを block か inline に変更
    img(src="width 300px の画像")

div(class="block width200px")
  div(class="block")  ← この要素のdisplayを block か inline に変更
    img(src="width 300px の画像")