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

我正在尝试创建一个流畅的 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 来解决该问题。

Thanks!

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

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

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

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

要获得相同的行为，需要进行一些浏览器分叉（IE、ptzsch...）：https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https://github.com/stubbornella/oocss/wiki/grids