Chrome 37 计算四舍五入答案

【问题标题】：Chrome 37 calc roundingChrome 37 计算四舍五入
【发布时间】：2014-10-29 00:10:19
【问题描述】：

<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 中引入的。有谁知道这个问题是否已经被报告和/或是否会得到解决？

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

【问题讨论】：

自从实施 calc 以来，Chrome 中似乎一直存在这个问题sometime between version 23 and 26. 这是迄今为止每个版本的 Chrome 中的问题。
这个问题不仅限于px单位。 Here is the same problem with em。 (This is the lazy way to calculate em units from px)
半个像素会是什么样子？
@Paulie_D - 舍入 calc down 不是一个错误吗？
@Paulie_D - 我希望行为至少是一致的。 calc 向下舍入，width 向上舍入。疯狂！！

标签： css google-chrome css-calc

【解决方案1】：

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

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

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

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

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

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

FIDDLE

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

【讨论】：