如果使用flex-wrap:wrap,则IE11不会正确计算flex项目宽度。
见http://jsfiddle.net/MartijnR/WRn9r/6/
这4个盒子每个都有flex-basis:50%,所以我们应该得到两行两个框,而在IE11中每个框都有一行。将边框设置为0时,可正常工作。
任何想法,如果这是一个错误,或者如果有办法使IE11的行为(并仍然使用边界)?
- section {
- display: -moz-flex;
- display: -webkit-flex;
- display: flex;
- -moz-flex-direction: row;
- -webkit-flex-direction: row;
- flex-direction: row;
- -moz-flex-wrap: wrap;
- -webkit-flex-wrap: wrap;
- flex-wrap: wrap;
- width: 100%;
- Box-sizing:border-Box;
- margin:0;
- }
- .Box {
- border: 1px solid black;
- background: #ccc;
- display: block;
- -ms-flex: 50%;
- -moz-flex: 50%;
- -webkit-flex: 50%;
- flex: 50%;
- Box-sizing: border-Box;
- margin:0;
- }
美国在我的项目中,只有最新版本的受欢迎的浏览器需要得到支持,谢谢,但IE11是其中之一。
解决方法
它似乎是一个错误,当使用flex属性计算大小时,不会考虑框大小。当边框占用2px时,它大于50%,因此只有一个适合一行,所以所有的框都被拉伸到全宽。如果禁用边框并添加2px padding,您可以看到同样的事情。
您可以通过向.Box规则集添加max-width:50%来保持边框的正常工作。否则,您可以使用33.34%和49%之间的flex值。这将使宽度小于50%,包括边框,并且随着元素增长以填充可用空间,它们仍将是Flex容器的50%。一种丑陋的黑客,但它会工作,除非你添加一个组合的边框和大于50%的填充减去你设置的flex值。
或许比直接降低百分比值更好的方法是使用calc()。所有支持现代FlexBox语法的浏览器都支持这一点。您只需要从您要使用的百分比值中减去左,右填充和边距的总和。正如你所做的那样,你并不需要这个盒子大小的属性,所以它可以被删除。在IE中似乎还有一个问题,您不能在flex中使用calc,但可以在flex-based属性中使用它,这是您想要的。
- .Box {
- border: 1px solid black;
- /* additional styles removed for clarity */
- /*
- 50% - (border-left-width + border-right-width +
- padding-left + padding-right)
- */
- -webkit-flex-basis: calc(50% - 2px);
- flex-basis: calc(50% - 2px);
- }