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

之所以发生这种情况，是因为您将padding: 0 .75rem;放入了.col，请尝试删除该代码，它将随您所需。这是因为你定义了一个修复填充值，这样你就不小心给了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

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

2 个答案: