我遇到了Safari在flexbox行的第一个元素左边添加1px边距/间隙的问题.我在问题下方附上了一张图片:
flex box 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; }
但他们我注意到他们的计算没有浮动
file:style.css; 行:1028
.row:before, .row:after{ content: " "; display: table; }
加:
width: 100%
现在"边际"得到了解决.
您使用的网格系统存在safari问题:更改它.
希望我帮助过你.
我也注意到了这一点。这对我有用:
.row:before, .row:after { display: none; }