Chrome 37 计算四舍五入

Posted 2023-03-06

技术标签:

【中文标题】Chrome 37 计算四舍五入【英文标题】：Chrome 37 calc rounding 【发布时间】：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 向上舍入。疯狂！！ 【参考方案1】：

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

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

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

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

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

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

FIDDLE

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

【讨论】：

【参考方案2】：

这是一个已知的 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