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

Posted 2023-03-05

【中文标题】在 Internet Explorer 中包含 100% 宽度图像的 flex 子框的高度不正确

【英文标题】：Not correct height of flex child box which contains 100% width image in Internet Explorer

【发布时间】：2017-07-05 17:46:01

【问题描述】：

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

html

<div class="container">
  <div class="content-box">
    <div class="image-box">
      <img src="https://i.stack.imgur.com/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/

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

【问题讨论】：

这是你需要的吗：codepen.io/themeler/pen/vgMjow ?

@PrzemysławMelnarowicz 不幸的是没有:(

【参考方案1】：

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

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

【讨论】：

IE11 是否需要供应商前缀才能支持 flexbox？不，它没有:)

但是 IE11 似乎有很多关于 flex 的错误：caniuse.com/#feat=flexbox

***.com/questions/37905749/…

@fauxserious 是的，不幸的是它有很多错误，但这是一种新的。使用供应商前缀我得到了相同的结果。

@grinmax 我知道 IE 中的“最小高度问题”，这就是为什么使用 height 属性...