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://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.
这篇关于Chrome 37计算舍入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!