Safari无法正确显示基于百分比的网格系统

Question

我有一个网格系统，它有一个问题，即列并不总是填满行div。这是一个仅限Safari的问题，对桌面和移动浏览器都有影响。这似乎是由于Safari不能完全支持子像素渲染。

下面提出的一个解决方案要求我关闭边界框。然而，我真的需要它来阻止网格崩溃。有什么解决方案可以解决这个问题吗？我不介意解决方案是基于JS的，因为它不会对性能产生太大影响。谢谢。

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.row {
    width: 100%;
    margin: 0 auto;
    max-width: 75rem;
}
.row:before, .row:after, .row .row:before, .row .row:after, .row .row.edge:before, .row .row.edge:after {
    content:" ";
    display: table;
}
.row:after, .row .row:after, .row .row.edge:after {
    clear: both;
}
.row.edge > .col {
    padding: 0;
}
.row.edge .row {
    margin: 0;
}
.row .row, .row .row.edge {
    width: auto;
    margin: 0 -.75rem;
    max-width: none;
}
.row .row.edge, .row .row.edge.edge {
    margin: 0;
}
.col {
    position: relative;
    padding: 0 .75rem;
    float: left;
}
.s-5 {
    width: 5%;
}

http://jsfiddle.net/matt3224/XT9QZ/1/

问题的图片在这里！Columns not filling row

Answer 1

这是因为您在.col中放置了padding: 0 .75rem;，尝试删除该代码，它将是您想要的。这是因为你定义了一个固定的填充值，通过这样做你意外地给出了min。cols的宽度。

Answer 2

删除box-sizing: border-box;

删除此CSS

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

检查this。

或者，您可以覆盖box-sizing。

CSS

.row {
    width: 100%;
    margin: 0 auto;
    max-width: 75rem;
    box-sizing: content-box; /*Add this css*/
    }

.col {
    position: relative;
    padding: 0;
    float: left;
    box-sizing: content-box; /*Add this css*/
}

检查this