Css 铬37钙圆整 #outerDiv、#innerDiv、#remainderDiv{ 高度：100px； } #外层{ 宽度：55.5px； z指数：1； 背景色：红色； } #innerDiv{ 宽度：计算（100%-10px）； z指数：100； 背景颜色：蓝色； 浮动：左； } #剩余部分{ 宽度：10px； z指数：100； 背景颜色：绿色； 浮动：左； }

结果:

这把小提琴显示了Chrome 37的问题。对具有十进制像素的元素使用calc（100%-10px）函数，它总是向下舍入。这会引起奇怪的事情

在本例中，外部div的宽度为50.5px。两个内部div的宽度分别为calc（100%-10px）和10px。即使总数为50.5，它仍然显示红色背景

这个问题似乎是在Chome 37中介绍的。是否有人知道该问题是否已经报告和/或是否将得到解决

---

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

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

1）

宽度：55.5px正被四舍五入到56px，并且

2） 
宽度：计算（100%-10px）-100%宽度被四舍五入到55px

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

因此，作为一种解决方法，只需避免为remainderDiv添加宽度

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


这样，剩余的div将是10px或11px-但至少布局不会中断
这是一个已知的Chrome错误，现已修复，并将很快合并到开发频道

自从calc实施以来，这个问题似乎一直存在于Chrome中。到目前为止，Chrome的每个版本都存在这个问题。这个问题不仅限于
px
单位。（）半个像素会是什么样子？@Paulie_D-不过，舍入
calc
不是一个错误吗？@Paulie_D-我希望这种行为至少是一致的<代码>计算
向下舍入，
宽度
向上舍入。疯狂！！
<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;
}