flexbox在Safari中添加1px左边距

我在Safari中向Flexbox行中的第一个元素的左侧添加1px的边距/间距时遇到问题。我已经把它贴跌破发行的图像：flexbox在Safari中添加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; 
}

但他们我已经注意到，他们计算没有浮动

来源

2015-12-07 Tim

请添加您正在使用的那一刻 – Shaun

我只是增加了一些CSS感谢肖恩 – Tim

file：style.css; 行：1028

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

地址：

width: 100%

现在的 “保证金” 就解决了。

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

希望我已经帮助你。

来源

2015-12-08 01:32:03

由于一吨的任何代码！将永远无法追踪到这一点。我现在对Safari做了一些进一步的修复，谢谢 – Tim

他们计算没有浮动的原因是flex取消它们。按flexbox spec：

float和明确对柔性项目没有影响，不要把它乱流。但是，浮动属性仍然可以通过影响显示属性的计算值来影响框。

因此按照迈克尔是好的，但如果你想Flexbox的，你想要的是Flex容器上100％的宽度：

.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 generator以了解flex如何工作。

来源

2015-12-08 05:43:49 hexalys

这样做，谢谢！ – Tim

我也注意到了这一点。下面是我工作：

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

来源

2017-03-19 19:28:29 jheathco

非常感谢，这对我有所帮助。 – ArtemKh

flexbox在Safari中添加1px左边距

回答

相关问题