css - Chrome 37 计算四舍五入

Question

<div id="outerDiv">
    <div id="innerDiv"></div>
    <div id="remainderDiv"></div>
</div>

#outerDiv, #innerDiv, #remainderDiv{
    height: 100px;
}
#outerDiv{
    width: 55.5px;
    z-index: 1;
    background-color: red;
}
#innerDiv{
    width: calc(100% - 10px);
    z-index: 100;
    background-color: blue;
    float: left;
}
#remainderDiv{
    width: 10px;
    z-index: 100;
    background-color: green;
    float: left;
}

http://jsfiddle.net/yz8cwj3a/

结果：http: //i.imgur.com/DYor2yb.png

这个小提琴显示了 Chrome 37 的一个问题。在具有小数像素的元素上使用 calc(100% - 10px) 函数，它总是向下舍入。这会导致奇怪的事情。

在示例中，外部 div 的宽度为 50.5px。两个内部 div 具有 calc(100% - 10px) 和 10px 作为宽度。即使这应该是总共 50.5，它仍然显示红色背景。

Chome 37 中似乎引入了问题。有谁知道这个问题是否已经被报告和/或是否会得到解决？

编辑：我从评论中了解到这个问题已经存在了很长时间。有没有（跨浏览器）巧妙的方法来解决这个问题？

Answer 1

这是一个已知的 Chrome 错误，现已修复，很快将合并到开发频道。

https://code.google.com/p/chromium/issues/detail?id=448796&q=label%3ACr-Blink&colspec=ID+Pri+M+Week+ReleaseBlock+Cr+Status+Owner+Summary+OS+Modified

Answer 2

检查元素后，似乎很清楚：

1)width: 55.5px;被四舍五入到 56px 并且

2) width: calc(100% - 10px);- 100% 的宽度被四舍五入到 55px

这会在 56px 宽的容器中留下 1px 的红色。

因此，作为一种解决方法，只需避免向您的剩余空间添加宽度，

并使用不同的方法“填充”容器，例如overflow:hidden

小提琴

这样剩余的 div 要么是 10px 要么是 11px - 但至少布局不会中断