css - Flexbox 元素的高度在 IE 上折叠

Question

正如您在 fiddle 上看到的，我试图实现的是图像在 block 中居中，文本位于底部。

这在 chrome 上工作正常，但在 ie11 上它看起来像 .item 容器的高度已经崩溃，所以布局看起来完全坏了。我是不是把这个复杂化了，或者我这样做的方式有一个已知的 IE 错误？

http://jsfiddle.net/kco6ybd4/7/ (在url末尾添加show，即可在IE11上查看)

.row {
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
}

.item {
  display: flex;
  flex-flow: column;
  text-align: center;
  padding: 5px;
  width: calc(100% * (1/4));
  box-sizing: border-box;
}

.image {
  flex: 1 0 0%;
  align-items: center;
  display: flex;
  margin-bottom: auto;
  max-width: 100%;
}

img {
  max-width: 100%;
  display: block;
}

.text {
  height: 50px;
}

Answer 1

这个问题很有趣，所以我尝试了不同的方法来寻找可能的跨浏览器解决方案。对我来说最大的问题是为每个图像获取准确的最大宽度(当你回显图像时，这可以用 jquery 或在 php 中实现，但我想找到一个纯 CSS 解决方案，因为这是诀窍)。为此，我使用单个媒体查询对代码进行了硬核处理(我知道，它不是那么漂亮)，您可以使用更好的宽度进行更改。

这个方法是跨浏览器的(我用IE11测试过)。也许这对您来说不是正确的解决方案，但我认为这是面对问题的一种可能方法。 :)

试试这个:

.row {
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
}

.item {
  display: flex;
  flex-flow: column;
  text-align: center;
  padding: 5px;
  width: calc(100% * (1/4));
  box-sizing: border-box;
  min-height: 1px; /* trick for IE11 */
}

.image {
  flex: 1 1 auto;

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1px; /* trick for IE11 */
}

img {
  flex: 0 1 auto;
}

.text {
  height: 50px;
}

@media screen and (max-width: 1200px) {
  img {
    width: 100%;
  }
}