Flexbox在Safari中无法正常工作（环绕）

虽然我在flexbox容器的子元素上设置了百分比宽度，但Safari似乎忽略了它们，或者至少使它们略有不同。这意味着当3个项目应该连续排列时，只显示2个项目。Flexbox在Safari中无法正常工作（环绕）

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

正如你所看到的，在桌面上每个列表项应宽33.33333％。这不会发生在第一行？值得注意的是我的前缀是使用Autoprefixer添加的。

只要从.mosaic中删除display: flex，列表项就按行排队。所以这是导致它的flexbox。我需要这个来确保所有列表项都是连续的高度。

我试过使用flex: 1 0 auto;这是在另一篇文章中提到，但它似乎并没有工作这种情况。我没有使用flexbox很多，所以我的知识是非常基本的，所以也许值只需要改变？

希望有人能帮助这个！ :)

来源

2017-03-06 user1406440

http://stackoverflow.com/q/35137085/3597276 –

谢谢，它看起来像我设法解决它与我的答案。看起来好像伪类之前/之后的类呈现为“实际”对象。 – user1406440

看起来问题是由：before /之后的原因：伪元素呈现为“固体”或具有某种形式的内容。因此设置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; 
    } 
}

希望帮助别人！一个非常烦人和令人沮丧的错误！ :)

来源

2017-03-06 14:33:13 user1406440

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

来源

2017-03-06 14:04:09 glaux

是的，我注意到如果我稍微减少宽度，它的工作，但他们的项目不对齐。不过，我认为我现在已经解决了这个问题。它是在元素被渲染为“实体”对象之后的：before /之前完成的。所以设置'width：0;'或'content：normal'似乎可以修复它！ – user1406440

Flexbox在Safari中无法正常工作（环绕）

回答

相关问题