Flexbox 在 Safari 中无法正常工作（包装）

Question

虽然我在我的 flexbox 容器的子元素上设置了百分比宽度，但 Safari 似乎忽略了它们，或者至少使它们略有不同。这意味着当 3 个项目应连续显示时，仅显示 2 个。

这是显示问题的 CodePen：http://codepen.io/moy/pen/BWLKbo

如您所见，在桌面上，每个列表项的宽度应为 33.33333%。这不会发生在第一行吗？值得注意的是，我的前缀是使用 Autoprefixer 添加的。

一旦您从.mosaic 中删除display: flex，列表项就会排成一行。所以它是 flexbox 造成的。我需要这个来确保所有列表项的高度连续。

我尝试使用另一篇文章中提到的flex: 1 0 auto;，但在这种情况下似乎不起作用。我没有大量使用 flexbox，所以我的知识非常基础，所以也许只是需要更改值？

希望有人可以帮助解决这个问题！ :)

Answer 1

看起来问题是由 :before/:after 伪元素呈现为“实心”或具有某种形式的内容引起的。所以设置width: 0; 或content: normal; 似乎可以解决问题。

所以在容器上的 CSS (scss) 将是：

.mosaic {
    @include clearfix;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 $vertical-spacing;
    padding-left: 0;
    width: 100%;

    &:before,
    &:after {
        content: normal;
    }
}

希望对其他人有所帮助！一个非常烦人和令人沮丧的错误！ :)

Answer 2

这似乎是布局引擎中的某种舍入错误。 至少在移动 Safari 上，我可以通过将宽度更改为 33% 而不是 33.33333% 来使其工作。 如果这不会干扰页面上的其他设计，那可能是解决方案。