IE11 中的 multiline-flexbox 计算宽度不正确？

Posted 2023-03-06

【中文标题】IE11 中的 multiline-flexbox 计算宽度不正确？

【英文标题】：multiline-flexbox in IE11 calculating widths incorrectly?

【发布时间】：2014-03-23 10:12:21

【问题描述】：

如果使用flex-wrap: wrap，IE11 似乎无法正确计算弹性项目宽度。

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

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

知道这是一个错误，还是有办法让 IE11 正常运行（并且仍然使用边框）？

<section>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</section>

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 就是其中之一。

【问题讨论】：

怀疑这是一个错误，所以在social.msdn.microsoft.com/Forums/ie/en-US/…发帖

可能是一个舍入问题。 FWIW 将最大宽度设置为 50% 可以修复它。

顺便说一句，您的代码中有错字：-moz-webkit-flex。

【参考方案1】：

在使用flex 属性计算大小时，似乎没有考虑box-sizing 的错误。由于边框占 2px，大于 50%，因此只有一个适合一行，所以所有框都被拉伸到全宽。如果您禁用边框并改为添加 2px 填充，您会看到同样的事情发生。

您可以通过将max-width: 50% 添加到.box 规则集，使其在保持边界的同时正常工作。否则，您可以使用 33.34% 到 49% 之间的弹性值。这将使包括边框在内的宽度小于 50%，并且随着元素增长到填充可用空间，它们仍将是 flex 容器的 50%。有点丑陋的技巧，但除非您添加大于 50% 减去您设置的 flex 值的组合边框和填充，否则它将起作用。

也许比直接减少百分比值更好的方法是使用calc()。所有支持现代 Flexbox 语法的浏览器都支持这一点。您只需从要使用的百分比值中减去左右填充和边距的总和。当你这样做时，你并不真的需要 box-sizing 属性，所以它可以被删除。在 IE 中似乎还有另一个问题，您不能在 flex 速记中使用 calc，但您可以在 flex-basis 属性中使用它，这就是您想要的。

.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);

查看演示：http://jsfiddle.net/dstorey/78q8m/3/

【讨论】：

不幸的是，添加最大宽度不会使盒子再弯曲。

它确实看起来像一个盒子大小的错误。

第二种解决方案将起作用。尽管您上面的解决方案在 Safari 和 Firefox 中不起作用，但使用这个可以。只需确保 25% 的弹性低于 25% 但高于下一个较小的尺寸。在下面的演示中，我使用 48% 而不是 50 和 23% 而不是 25，但您可以根据需要进行调整：jsfiddle.net/WRn9r/25

这是一个没有多余前缀和类的版本jsfiddle.net/WRn9r/26

我使用 calc 添加了第二个解决方案的版本，而不是仅仅降低 % 值并切换到 flex-basis。

【参考方案2】：

我在 Microsoft 论坛上收到了 Rob 提供的解决方法。见http://social.msdn.microsoft.com/Forums/ie/en-US/8145c1e8-6e51-4213-ace2-2cfa43b1c018/ie-11-flexbox-with-flexwrap-wrap-doesnt-seem-to-calculate-widths-correctly-boxsizing-ignored?forum=iewebdevelopment

设置min-width 并更改为flex:auto 使框能够正常运行，同时保持其灵活性。

请参阅http://jsfiddle.net/MartijnR/WRn9r/23/ 及以下内容，了解更高级的解决方法示例：

<section>
    <div class="box fifty">1</div>
    <div class="box twentyfive">2</div>
    <div class="box twentyfive">3</div>
    <div class="box fifty">4</div>
    <div class="box fifty">5</div>
</section>


section 
    display: -moz-webkit-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -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;
    box-sizing: border-box;
    margin:0;
    -ms-flex: auto;
    -moz-flex: auto;
    -webkit-flex: auto;
    flex: auto;

.fifty 
    min-width: 50%;

.twentyfive 
    min-width: 25%;

【讨论】：

由于此答案对其他人最有用，因此我将其标记为正确。我希望这不会违反 *** 的礼仪。

这不再适用于 Safari。它不包装。它也有不一致的结果。在 Firefox 中，它换行到第三行。

顺便说一句，不需要 ms 前缀，因为 IE11 实现没有前缀。 IE10 使用不同的语法，并且您还没有通过显示启用它：-ms-flexbox;反正。 -moz- 前缀也不需要，因为 Firefox 实现了没有前缀的最终语法。

你是对的。谢谢大卫！将您的答案标记为正确！

这篇文章和回答拯救了我的一天！非常感谢！

【参考方案3】：

Philip Walton 在这里对这个错误有一个很好的总结：https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box。他提出了两种解决方案，其中最简单的一种是设置flex-basis: auto 并改为声明width。 （不是max-width 或min-width。）此解决方案的优点是当您更改填充或边框宽度时无需调整calc()。

【参考方案4】：

This is clearly an IE bug 所以保留原来的 [正确] CSS 并附加一个针对 IE10+ 的 hack：

/* IE10+ flex fix: */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
    .box 
        flex: 0;
        min-width: 50%;
    

http://jsfiddle.net/stedman/t1y8xp2p/

【讨论】：

拯救了我的一天！非常感谢！