IE11导致flexbox布局问题

时间:2018-01-09 11:40:21

标签: html css css3 flexbox internet-explorer-11

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

How the homepage supposed to look

How another section is supposed to look

How the homepage looks in IE11

How the other section looks in IE11

指向我的代码的链接(减去正常工作的部分):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;
}

非常感谢任何建议。

0 个答案:

没有答案