2015-12-07 116 views
2

我在Safari中向Flexbox行中的第一個元素的左側添加1px的邊距/間距時遇到問題。我已經把它貼跌破發行的圖像:flexbox在Safari中添加1px左邊距

enter image description here

柔性盒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; 
} 

但他們我已經注意到,他們計算沒有浮動

+0

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

+0

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

回答

4

file:style.css; 行:1028

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

地址:

width: 100% 

現在的 「保證金」 就解決了。

您使用的網格系統存在safari問題:請更改它。

希望我已經幫助你。

+0

由於一噸的任何代碼!將永遠無法追蹤到這一點。我現在對Safari做了一些進一步的修復,謝謝 – Tim

3

他們計算沒有浮動的原因是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如何工作。

+0

這樣做,謝謝! – Tim

2

我也注意到了這一點。下面是我工作:

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

非常感謝,這對我有所幫助。 – ArtemKh