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

Question

我正在尝试创建一个流畅的 CSS 网格，它在 Firefox 和 IE8+ 中有效，但在亚像素舍入问题变得可见的 Safari/Chrome/Opera 中无效:

http://jsfiddle.net/bJKQ6/2/

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

主容器的宽度为 100%，如果您在 Safari/Chrome/Opera 中更改浏览器大小，您会看到四舍五入的宽度不一致。

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

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

谢谢!

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

Answer 1

Stubbornella 的 OOCSS 框架(下面的链接)网格模块通过为最后一列提供以下覆盖来处理此问题:

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

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

要获得相同的行为，需要一些浏览器 fork (IE、ptzsch……): https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https://github.com/stubbornella/oocss/wiki/grids