css – 多线 – flexbox在IE11中计算宽度不正确?

前端之家收集整理的这篇文章主要介绍了css – 多线 – flexbox在IE11中计算宽度不正确?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果使用flex-wrap:wrap,则IE11不会正确计算flex项目宽度。

http://jsfiddle.net/MartijnR/WRn9r/6/

这4个盒子每个都有flex-basis:50%,所以我们应该得到两行两个框,而在IE11中每个框都有一行。将边框设置为0时,可正常工作。

任何想法,如果这是一个错误,或者如果有办法使IE11的行为(并仍然使用边界)?

  1. <section>
  2. <div class="Box">1</div>
  3. <div class="Box">2</div>
  4. <div class="Box">3</div>
  5. <div class="Box">4</div>
  6. </section>
  1. section {
  2. display: -moz-flex;
  3. display: -webkit-flex;
  4. display: flex;
  5. -moz-flex-direction: row;
  6. -webkit-flex-direction: row;
  7. flex-direction: row;
  8. -moz-flex-wrap: wrap;
  9. -webkit-flex-wrap: wrap;
  10. flex-wrap: wrap;
  11. width: 100%;
  12. Box-sizing:border-Box;
  13. margin:0;
  14. }
  15. .Box {
  16. border: 1px solid black;
  17. background: #ccc;
  18. display: block;
  19. -ms-flex: 50%;
  20. -moz-flex: 50%;
  21. -webkit-flex: 50%;
  22. flex: 50%;
  23. Box-sizing: border-Box;
  24. margin:0;
  25. }

美国在我的项目中,只有最新版本的受欢迎的浏览器需要得到支持,谢谢,但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属性中使用它,这是您想要的。

  1. .Box {
  2. border: 1px solid black;
  3. /* additional styles removed for clarity */
  4.  
  5. /*
  6. 50% - (border-left-width + border-right-width +
  7. padding-left + padding-right)
  8. */
  9. -webkit-flex-basis: calc(50% - 2px);
  10. flex-basis: calc(50% - 2px);
  11. }

参见演示:http://jsfiddle.net/dstorey/78q8m/3/

猜你在找的CSS相关文章