html - Flexbox 中的图像高度在 IE 中不起作用

Question

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

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

我已经尝试了几种方法，例如 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 有很多 flexbug:

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

---

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

代替 flex 元素上的这段代码:

img {
    margin: auto;
}

在 flex 容器上使用它:

.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>