流体网格未正确缩放

Question

我有这个流畅的网格，max-width为1280像素。

它由五列设置组成 - grid2，grid4，grid6，grid8和grid10。

整体而且乍一看它看起来不错，但是在检查代码时（在firefox和google chrome中检查），最小的点（grid2）高度只有一个像素。

在max-width处，其余部位的高度应为320px，但仅为319px。

我无法正常工作。

看我的小提琴：http://jsfiddle.net/4ya94/

.grid2 {
    width: 18.72%;
}

我希望你们中的任何人都能帮助\ O /

Answer 1

这是由于子像素渲染。

您定义的div宽度为1280px * 18.72%;，即239.616px

宽高比为240px / 320px = 0.75

因此高度将为239.616px / 0.75 = 319.488px，然后向下舍入为319px

对于您的参考：根据10.6.1

部分中的CSS 2.1规范

  

如果'height'的计算值为'auto'，则该元素有一个   固有比率然后'高度'的使用值是：

(used width) / (intrinsic ratio)