Css Flexbox项目'；s的高度在IE上崩溃了

正如你在小提琴上看到的，我试图实现的是，图像在块中居中，文本位于底部。



这在chrome上运行良好，但在ie11上，它看起来像是.item容器的高度已经塌陷，因此布局看起来完全崩溃了。我是不是把这件事复杂化了，还是我做这件事的方式有一个已知的IE漏洞

（在要在IE11上查看的url末尾添加show）

---

这个问题非常有趣，所以我尝试了不同的方法来找到一个可能的跨浏览器解决方案。对我来说，最大的问题是获取每个图像的确切最大宽度（在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%;
  }
}

---

当flex容器也是flex项目时，我有时会看到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%;
  }
}