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

Question

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

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

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

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

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

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

谢谢！

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

Answer 1

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

Answer 2

对于每个浏览器来说，没有一个很好的选择可以上下调整像素，但除此之外，我通常会这样做：

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

这将使最后一个子项向右浮动，因此px未对齐不明显，但如果它是唯一的元素（比如一个宽度为33％的div），那么它将继续向左浮动。