我正在尝试创建一个流畅的 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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
