Flexbox在Safari中不起作用(包装)

Question

虽然我在柔性盒容器Safari的子元素上设置了百分比宽度，但Safari似乎忽略了它们，或者至少使它们略有不同。这意味着当3项应列在一行时，只显示2项。

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

正如你所看到的，桌面上的每个列表项目都应该是33.33333%宽.这不会发生在第一排吗？值得注意的是，我的前缀是使用自动重定位器添加的。

一旦您从display: flex中删除.mosaic，列表项就会成行排列。所以是柔性箱造成的。我需要这个，以确保所有的列表-项目是相同的高度在一排。

我试过使用flex: 1 0 auto;，这是在另一篇文章中提到的，但它似乎无法解决这种情况。我没有经常使用柔性盒，所以我的知识是非常基本的，所以也许只是需要改变价值观？

希望有人能帮上忙！)

Answer 1

看起来，这个问题是由于伪元素呈现为“solid”或具有某种形式的内容而引起的。因此，设置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%来使其工作。如果这不妨碍页面上的其他设计，这可能是解决方案。