如何修复 IE 中的 flex 列高错误

Question

在 IE 中，我遇到了一个问题，即我的 flex 列由于未知原因而被拉伸。我需要每个 flex 项目的图像高度和宽度始终相同并且响应，所以我需要它们 100%。我还需要 flex 页脚始终与其他页脚处于同一水平，无论 flex-name 是否跨越 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

Answer 1

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

..我也不知道为什么，虽然根据这个Microsoft bug reportgithub post，它强制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，它也可以工作

Answer 2

在父元素上尝试添加：

display: flex;
align-items: stretch;
flex-direction: column;
min-height: 1px;
-ms-flex-negative: 0;

这对我有用。

Answer 3

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

<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 不再支持 Microsoft 供应商前缀 ("-ms-") 版本的弹性框属性。您应该改用不带前缀的名称，这对于更好的标准合规性和未来兼容性来说是首选。

另一方面，这个供应商前缀确实解决了我的问题，而其他没有。因此，请自行决定使用它；如果没有其他选择，可能值得。

Answer 4

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

Answer 5

.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%;
  flex-shrink: 0;
}

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>