Safari中的Flexbox儿童比预期的要宽

看这支笔：

我有一个简单的基础网格，我把代码>显示：Flex >“行”元素，以使所有列都具有相同的高度。 在Chrome和Firefox中都能正常工作。 但在Safari、Edge和Yandex浏览器（任何版本）上，这些列都太宽了一个像素左右，导致它们不适合一行。因此，它将换行为两行。

如果只有一行，设置

flex wrap:nowrap

将是一个选项，但通常情况并非如此。 最重要的是，它并没有解决核心问题

我在这个flexbox世界里遗漏了什么，还是一个bug

谢谢

---

另外：它不仅发生在列宽为33.33333%时，而且发生在列宽为25%时。那么额外的像素从何而来呢？

在

:before

和

:before

伪元素是clearfix hack的一部分，用于包含浮动并防止边距崩溃。Flexbox基本上忽略了浮动，但是不支持Flexbox的老浏览器会退回到使用浮动，所以他们需要clearfix。根据@DannieVinther和@Armands的评论，有两种可能的解决方案：

如果您想为不支持flexbox的旧浏览器维护clearfix功能，您可以添加一个规则来设置

width:100%：前

和

：后

伪元素上的code>。这将使伪元素的宽度为100%，高度为0，因此它们不会与实际内容行的宽度相混淆

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

---

Safari考虑了pSUDO元素的宽度（即：之前、之后），这两个基础和Bootstrap都在.Reo容器上生成。一个简单的解决方案是设置一个类名来删除.row容器上的那些伪元素。例如，.flex-container:before，.flex-container:after{content:none；}然后将其放在.row容器上（谢谢！终于解开了这个谜：）我想只有当

display:table

设置为：before，：after元素时才会发生这种情况。如何在伪元素上设置

width:100%

，以避免丢失此方法的clearfix属性？那么伪元素的宽度为100%，高度为0。因此，它们不会干扰实际的列，但是clearfix仍然有效。你不需要clearfix，因为flexbox完全忽略了浮动。太好了！谢谢很高兴知道！不客气。快乐编码。 .row:before, .row:after { content: none; }