Question

我遇到了Safari在flexbox行的第一个元素左边添加1px边距/间隙的问题。我在下面附上了一张图片：

弹性框css是：

.equal-height {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        -webkit-flex-direction: row;
        -webkit-flex-wrap: wrap;
        flex-direction: row;
        flex-wrap: wrap;
    }

子元素设置如下：

.child-div {
    float: left;
    display: block;
    width: 33.3333%;
    box-sizing: border-box;
}

但他们我注意到他们的计算没有浮动

Answer 1

file：style.css; 行：1028

.row:before, .row:after{
  content: " ";
  display: table;
}

添加：

width: 100%

现在“保证金”已经解决了。

您使用的网格系统存在safari问题：更改它。

希望我帮助过你。

Answer 2

我也注意到了这一点。这对我有用：

.row:before, .row:after {
  display: none;
}

Answer 3

它们在没有浮动的情况下计算的原因是flex取消了它们。根据{{3}}：

float和clear对flex项没有影响，不要接受它乱流。但是，float属性仍然可以影响框通过影响显示属性的计算值来生成。

因此根据Michael的说法，灵活容器上100％的宽度是可以的，但是如果你想要flexbox，你想要的是：

.child-div {
        width: 33.3333%;
        box-sizing: border-box;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
}

即。您需要使用浮点数或弹性值，但不能同时使用两者。

您可能需要查看此flexbox spec以了解flex的工作原理。

flexbox在Safari中添加1px左边距

3 个答案: