javascript - 修复 CSS 流体网格中的子像素舍入问题

Question

我正在尝试创建一个流畅的 CSS 网格，它适用于 Firefox 和 IE8+，但不适用于 Safari/Chrome/Opera，其中亚像素舍入问题变得可见：

.column {
  float: left;
  width: 25%;
}

主容器的宽度为 100%，如果您在 Safari/Chrome/Opera 中更改浏览器大小，您可以看到圆角宽度不一致。

在广泛阅读该问题后，我了解到亚像素舍入“没有正确或错误的解决方案”，但 Firefox 方式对我来说似乎是最好的折衷方案。（例如，如果我将 4 个 div 设置为 25% 的宽度，我希望覆盖区域为 100%。）

我想知道是否有我错过的纯 CSS 解决方案，或者一些 JavaScript 来解决问题。

谢谢！

更新：截至 2014 年 5 月，Chrome 33 和 Safari 7 似乎采用了“Firefox 方式”。

score 8 · Accepted Answer

Stubbornella 的 OOCSS 框架（下面的链接）网格模块通过为最后一列提供以下覆盖来处理这个问题：

float:    none;
overflow: hidden;
width:    auto;

这允许它占据容器内剩余的任何宽度。

score 0 · Accepted Answer

很糟糕，没有一个很好的选择可以为每个浏览器向上和向下舍入像素，但代替它，我通常会这样做：

.nested:last-child {
    float: right;
}
.nested:first-child {
    float: left;
}

这会将最后一个子元素浮动到右侧，因此 px 未对齐并不明显，但如果它是唯一的元素（例如 33% 宽度的 div），那么它将继续向左浮动。

2 回答 2