Question

我和许多其他人一样，无法让我的flexbox页面布局在IE11中运行。我的代码在W3C Validator上验证得很好，我添加了所有必要的前缀。我也在IE11中阅读了flexbox的常见问题，但似乎无法弄清楚问题究竟在哪里或者如何修复它。

指向我的代码的链接（减去正常工作的部分）：https://jsfiddle.net/f09skq5w/

这是页面各部分的CSS，从我读到的内容可能会出现最小高度的问题，但我尝试了一些解决方法，而且似乎都没有做到这一点：

section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 60px 50px;
  min-height: 100vh;
}

然后是你可以在第2张和第4张图片中看到的#projects部分的代码。

#projects .grid li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-preferred-size: 30%;
      flex-basis: 30%;
  text-align: center;
}

#projects .thumbnail-img {
  max-width: 100%;
  max-height: 100%;
  min-height: 235px;
  padding: 0 30px 25px;
}

非常感谢任何建议。

IE11导致flexbox布局问题

0 个答案: