html - 在 Internet Explorer 中包含 100% 宽度图像的 flex 子框的高度不正确

Question

我使用 Chris' Coyer approach使页脚粘在页面底部。

HTML

<div class="container">
  <div class="content-box">
    <div class="image-box">
      <img src="/image/XIQ2T.jpg">
    </div>
  </div>
  <div class="bottom-box">Bottom</div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}
.bottom-box {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */  
  background: #069;
  color: #fff;
  line-height: 3;
}
.content-box {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
}
.image-box img {
  max-width: 100%;
}

它运行良好。直到我遇到 Internet Explorer 11 中的问题。如果我将大图像放入内部框并使用 max-width: 100% 调整大小，则父框会占用原始图像之前的高度调整大小。

实际:父框在调整大小之前采用原始图像的高度。它在 IE11 中是这样工作的。

预期:

父框在调整大小后获取图像的高度。它适用于 Chrome、Firefox、Safari。

JSFIDDLE:为了更好地理解问题，您可以在此处查看代码和示例:https://jsfiddle.net/v9ocv7b6/31/

有人知道如何解决这个问题吗？

Answer 1

您试过为 IE 使用前缀 -ms- 吗？

http://caniuse.com/#search=flexbox