flexbox中的图像高度在IE中不起作用

Question

我有一个 flex“行”，其中包含 5 个 flex“单元格”，其中包含一个应该在中间对齐的图像。

它在 Chrome 和 Firefox 中完美运行，但在 IE 中却不行。它没有得到好的比例。换句话说，height:auto 在 IE 中当图像在 flexbox 中时不起作用。

我已经尝试了几种方法，例如 flex:none; 用于图像或将图像包装在另一个 div 中。没有任何效果。

我希望它具有良好的比例并且完全居中：

这是一个 jsFiddle：https://jsfiddle.net/z8op323f/5/

.grid-row {
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
}
.grid-cell {
  height: 100%;
  width: 25%;
  transition: box-shadow 2s;
  display: flex;
}
img {
  width: 60%;
  margin: auto;
  height: auto !important;
  min-height: 1px;
}
.long {
  width: 80%;
  height: auto !important;
}

<div class="grid-row">
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
</div>

Answer 1

height: auto 仅表示内容的高度。这是一个默认值；你不需要指定它。

如果您从代码中删除 height: auto，它不会更改任何内容（在任何浏览器中）。

来自规范：10.5 Content height: the height property

---

问题似乎是 margin: auto 在 Chrome 和 FF 中受到尊重。但它在 IE 11/Edge 中（大部分）被忽略了。

这可能是一个错误。特别是 IE11 有很多 flexbugs：

• https://github.com/philipwalton/flexbugs
• http://caniuse.com/#search=flexbox（参见“已知问题”标签）

---

一个简单的跨浏览器解决方案是使用 margin: auto 等效项：

在弹性项目上代替这段代码：

img {
    margin: auto;
}

在弹性容器上使用它：

.grid-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

有关更多详细信息，请参见此处的框 #56：https://stackoverflow.com/a/33856609/3597276

Revised Fiddle

.grid-row {
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
}
.grid-cell {
  height: 100%;
  width: 25%;
  transition: box-shadow 2s;
  display: flex;
  justify-content: center;    /* NEW */
  align-items: center;        /* NEW */
}
img {
  width: 60%;
  /* margin: auto; */
  /* height: auto !important; */
  min-height: 1px;
}
.long {
  width: 80%;
  /* height: auto !important; */
}

<div class="grid-row">
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
</div>

Answer 2

尝试为 IE 10 添加display: -ms-flexbox;