如何在IE中修复flex column height bug

Posted 2021-04-21

在IE中我遇到了一个问题，我的flex列被拉伸的原因不明。我需要每个弹性项目的图像高度和宽度始终相同，并且响应所以我需要它们100％。我还需要弹性页脚始终与其他页面处于同一级别，无论弹性名称是否超过1行，它都会粘到容器的底部。

.flex-container {
  display: flex;
  border: 1px solid red;
}

.flex-item-wrapper {
  display: flex;
  border: 1px solid green;
  flex-direction: column;
  width: 185px;
}

.link-spanner {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.flex-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: auto;
}

.image-container {
  margin-top: 5px;
  position: relative;
  width: 100%;
}

img {
  height: 100%;
  width: 100%;
}

.flex-item-name {
  max-width: 100%;
  text-align: center;
}

<div class="wrapper">
  <div class="flex-container">
    <div class="flex-item-wrapper">
      <a href='#' class="link-spanner"></a>
      <div class="flex-header">
        <div class="image-container">
          <img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
        </div>
      </div>
      <div class="flex-name">Bingobongo Bongobingobongo</div>
      <div class="flex-footer">
        <button>submit</button>
      </div>
    </div>
    <div class="flex-item-wrapper">
      <a href='#' class="link-spanner"></a>
      <div class="flex-header">
        <div class="image-container">
          <img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
        </div>
      </div>
      <div class="flex-name">Bingobongo Bongo</div>
      <div class="flex-footer">
        <button>submit</button>
      </div>
    </div>
    <div class="flex-item-wrapper">
      <a href='#' class="link-spanner"></a>
      <div class="flex-header">
        <div class="image-container">
          <img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
        </div>
      </div>
      <div class="flex-name">Bingobongo Bongobingobongo</div>
      <div class="flex-footer">
        <button>submit</button>
      </div>
    </div>
  </div>
</div>

jsfiddle

答案

除了这个post/answer，如果你将min-height: 1px;添加到.flex-header和.image-container，它将在你的情况下在IE11中工作..

..我不知道为什么，虽然根据这个Microsoft bug report，它迫使IE重新计算基于图像的大小。

Updated fiddle

.flex-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: auto;
  min-height: 1px;
}

.image-container {
  margin-top: 5px;
  position: relative;
  width: 100%;
  min-height: 1px;
}

实际上，如果你将-ms-flex-negative: 0;添加到.flex-header和.image-container它也有效

另一答案

我遇到了类似的问题：我在列中堆叠了2个弹性项目，并且其中都有一个图像，如下所示：

<article style="display: flex, flex-direction: column">
    <div id="topbar">
        <img src="..." id="topbar-banner">
    </div>

    <div id="content">
        <img src="..." id="background-img">
    </div>
<article>

理想情况下，我希望两列相互堆叠，每个flex项目的高度与其子项相同。在除IE之外的所有浏览器中，它工作正常;但是在IE中，在#topbar-banner下方和#topbar底部上方有一些空白区域，如果你垂直缩小页面，它会变大。

我尝试了LGSon's answer，并将-ms-flex-negative: 0添加到#topbar（其中包含不需要的空白区域的div），它通过删除不需要的空间来解决我的问题。像这样：

<div id="topbar" style="-ms-flex-negative: 0">

不幸的是，我找不到任何关于-ms-flex-negative的意思的官方文件，但我看到人们说它相当于flex-shrink。

我正在使用IE11;根据微软的documentation on flexbox，我现在不应该为IE11使用任何供应商前缀：

Internet Explorer 11不再支持Flexbox属性的Microsoft供应商前缀（“-ms-”）版本。您应该使用非前缀名称，这是更好的标准兼容性和未来兼容性的首选。

另一方面，这个供应商前缀确实解决了我的问题而其他没有。因此，您可以自行决定使用它;如果不存在其他替代方案，可能是值得的。

另一答案

你只需要使用Alignment-classes（.align-items-center或.align-self-center等），确保你没有使用.my-auto类来垂直对齐中心项目，它在chrome中完美运行但不是IE。将类.align-items-center添加到flex容器（.row）或.align-self-center到flex-children（.col-- etc）。