我和许多其他人一样,无法让我的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;
}
非常感谢任何建议。