safari - Safari 中的 Flexbox children 比预期的要宽

Question

看这支笔: https://codepen.io/armandsdz/pen/xqGaoe

我有一个简单的 Foundation 网格，我将 display:flex 设置为“行”元素，以使所有列的高度相同。在 Chrome、Firefox 中一切正常。但在 Safari、Edge、Yandex 浏览器(任何版本)上，这些列的宽度都在一个像素左右，导致它们不适合一行。因此，它换行成两行。 See image

设置 flex-wrap: nowrap 在只有一行的情况下是一个选项，但通常情况并非如此。最重要的是，它并没有从根本上解决问题。

我在这个 flexbox 世界中缺少什么，或者这是一个错误？

谢谢!

补充:它不仅发生在列宽为 33.33333% 时，也发生在列宽为 25% 时。那么额外的像素从何而来？

Answer 1

:before 和 :after 伪元素是 clearfix hack 的一部分，用于包含 float 并防止边距崩溃。 (参见 this SO question。)Flexbox 本质上忽略了 float ，但不支持 flexbox 的旧浏览器会回退到使用 float ，因此他们需要 clearfix。根据@DannieVinther 和@Armands 的评论，有两种可能的解决方案:

1. 如果您想为不支持 flexbox 的旧版浏览器保留 clearfix 功能，您可以在 :before 上添加一条规则来设置 width: 100%; 和 :after 伪元素。这将为伪元素提供 100% 的宽度和 0 的高度，因此它们不会弄乱实际内容的行宽。

   .row:before, .row:after {    width: 100%;}

2. 如果您不需要/不关心支持旧版浏览器，您可以通过添加规则来简单地覆盖 clearfix hack 以在 :before 上设置 content: none; 和 :after 伪元素。

   .row:before, .row:after {    content: none;}