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

Question

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

.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;

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