Safari 中的 Flexbox 子组件比预期的要宽答案

【问题标题】：Flexbox children in Safari wider than supposed to beSafari 中的 Flexbox 子组件比预期的要宽
【发布时间】：2017-07-18 12:21:33
【问题描述】：

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

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

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

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

谢谢！

补充：不仅在列宽为 33.33333% 时会发生这种情况，在 25% 时也会发生这种情况。那么额外的像素是从哪里来的呢？

【问题讨论】：

Safari 考虑了 psudo 元素的宽度（:before, :after），Foundation 和 Bootstrap 都在 .row-container 上生成。一个简单的解决方案是设置一个类名，以删除 .row-container 上的那些伪元素。例如，.flex-container:before, .flex-container:after { content: none;然后把它放在 .row-container (
谢谢！太好了，终于解开了这个谜团 :) 我认为这只有在 display:table 设置为 :before,:after 元素时才会发生。在伪元素上设置width:100% 怎么样，以免丢失此方法的 clearfix 属性？然后伪元素的宽度为 100%，高度为 0。因此，它们不会与实际列混淆，但 clearfix 仍然有效。
你不需要 clearfix，因为 flexbox 完全忽略了浮动。
太棒了！谢谢！很高兴知道！
不客气。编码愉快。

【解决方案1】：

:before 和 :after 伪元素是 clearfix hack 的一部分，用于包含浮动并防止边距折叠。（请参阅this SO question。）Flexbox 本质上忽略了浮动，但不支持 flexbox 的旧浏览器会退回到使用浮动，因此他们需要 clearfix。基于@DannieVinther 和@Armands 的cmets，有两种可能的解决方案：

如果您想为不支持 flexbox 的旧浏览器维护 clearfix 功能，您可以添加规则以在 :before 和 :after 伪元素上设置 width: 100%;。这将使伪元素具有 100% 的宽度和 0 的高度，因此它们不会与实际内容的行宽混淆。
.row:之前，.row:之后{ 宽度：100%； }
如果您不需要/不关心支持旧版浏览器，您可以简单地通过添加规则来覆盖 clearfix hack，在 :before 和 :after 伪元素上设置 content: none;。
.row:之前，.row:之后{ 内容：无； }

【讨论】：