flexbox adding 1px left margin in Safari

问题:

I'm having trouble with Safari adding a 1px margin/gap to the left on the first element in a flexbox row. I've attached an image below of the issue:

The flex box css is:

.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;
    }

The child elements are set to the following:

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

But they I have noticed that they are computed with no float

回答1:

file: style.css; line: 1028

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

add:

width: 100%

and now the "margin" is solved.

The grid system you used has problems with safari: change it.

Hope I've helped you.

回答2:

I've noticed this as well. Here's what worked for me:

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

回答3:

The reason they are computed with no float is that flex cancels them. As per flexbox spec:

float and clear have no effect on a flex item, and do not take it out-of-flow. However, the float property can still affect box generation by influencing the display property’s computed value.

So 100% width on the flex container as per Michael is ok, but if you want flexbox, what you want is:

.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;
}

i.e. You need to use either floats or flex, but not both.

You may want to have a look at this flexbox generator to understand how flex works.