Chrome 37计算舍入 [英] Chrome 37 calc rounding

问题描述

<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）函数，它总是向下舍入。这会导致奇怪的事情。

This fiddle shows a problem with Chrome 37. Using the calc(100% - 10px) function on an element with decimal pixels, it always rounds down. This causes strange things.

在这个例子中，外部div的宽度为50.5px。两个内部div具有calc（100％ - 10px）和10px作为宽度。虽然这应该是50.5总，它仍然显示红色背景。

In the example, the outer div has a width of 50.5px. The two inner divs have calc(100% - 10px) and 10px as widths. Even though this should be 50.5 total, it still shows the red background.

问题似乎引入Chome 37.有谁知道这个问题是否已经报告， / /如果它会被解决？

Issue seems to be introduced in Chome 37. Does anyone know if this issue has already been reported and/or if it will be solved?

编辑：我从评论中理解，问题已经存在更长时间。

I understand from the comments that the issue is already present for a longer time. Is there any (cross-browser) neat way to fix this?

推荐答案

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

This is a known Chrome bug that is now fixed and will soon be merged to the dev Channel.

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

这篇关于Chrome 37计算舍入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！