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

我正在尝试创建一个流畅的CSS网格，它在Firefox和IE8+中工作，但在Safari/Chrome/Opera中不工作，因为在Safari/Chrome/Opera中，亚像素取整问题变得明显：

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

在阅读了大量关于这个问题的书籍后，我明白了亚像素舍入“没有正确或错误的解决方案”，但Firefox方式似乎是我最好的折衷方案。 （例如，如果我将4个div设置为25%的宽度，我希望覆盖面积为100%。）

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

谢谢

---

更新：截至2014年5月，Chrome 33和Safari 7似乎已经采用了“Firefox方式”。Studella的OOCSS框架（以下链接）网格模块通过为最后一列提供以下覆盖来解决这一问题：

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

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

要获得相同的行为，需要一点浏览器分叉（即，ptzsch…）：

---

这太糟糕了，没有一个好的选项可以为每个浏览器上下取整像素，但取而代之的是，我通常会：

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

---

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

几天前我在这里回答了一个类似的问题，但它并非在所有元素中都以完全相同的宽度结束，如果没有javascript，这可能是最接近的了。谢谢你的回答。我想去掉“行”包装以获得更大的灵活性，我在fiddle中添加了另一个示例，显示了拇指图库，而无需包装每行。谢谢Barney，唯一的缺点是lastUnit类有点不灵活。我知道你的意思-我个人认为结构类名称是灵活HTML的必要组成部分，但这确实意味着要在其中添加很多。话虽如此，若你们愿意放弃对那个些不支持高级CSS 2.1选择器的浏览器的支持，就可以避免相当多的额外类：用

.line>*

替换对

unit

的引用，用

替换
.line>.lastUnit
替换
.line>*：last child
.Hey@gyo，我在这里创建了一个上面的演示：，然后我更进一步，去掉了除
行
类之外的所有内容，对于一个简化的情况，我们假设所有的分数宽度都是相等的宽度：我选择了你的答案，因为OOCSS网格的简化版本确实启发了我。。。我想到了：@Cory可能（在有10个项目的情况下）最小宽度：10%；这是个好主意吗？在任何情况下，创建一个关于StackOverflow的提琴和一个新问题肯定会得到一些参与…和我在这里定义的问题相同：如果元素需要放到下一行，它会向右浮动。我认为唯一合适的解决方案是对每个元素使用预处理器，并使用ceil（）和floor（）（手写笔，但SCSS有等价物），并在适当的方向上使用供应商前缀。如果我发现了什么，我会回来报告。。。
.nested:last-child {
    float: right;
}
.nested:first-child {
    float: left;
}