3
这个问题类似于Chrome 37 calc roundingCSS计算（）四舍五入
但真正的问题是一个比较复杂一点，而且所提供的解决方案不适用于这种情况下工作：
#outerDiv, #leftDiv, #middleDiv, #rightDiv{
height: 100px;
position: absolute;
}
#leftDiv, #rightDiv{
width: 20px;
z-index: 100;
background-color: green;
}
#outerDiv{
width: 100.5px;
z-index: 1;
background-color: red;
}
#middleDiv{
width: calc(100% - 40px);
z-index: 100;
background-color: blue;
left: 20px;
}
#leftDiv{
left: 0;
}
#rightDiv{
right: 0;
}<div id="outerDiv">
<div id="leftDiv">L</div>
<div id="middleDiv">M</div>
<div id="rightDiv">R</div>
</div>Chrome中的结果：http://i.imgur.com/vNvFfHC.jpg
解释更多：outerDi的宽度v是依赖于随机数量的文本，这是在另一个div也是在outerDiv内。左边和右边的div包含一个图像，所以它们的宽度是静态的。我们目前的解决方案是将calc改为：calc（100％ - 40px + 1px）;有没有更好的解决方案？
的用户提议封闭：问题是在铬红线的可见性。问题是如何覆盖#outerDiv而不会被内部div重叠。 – recursive 2014-09-19 17:19:22
关于四舍五入的可怕浏览器差异至少有一个很好的比较：http://cruft.io/posts/percentage-calculations-in-ie/ – sebilasse 2016-01-12 20:19:07
我知道这是相当古老，但该问题仍然出现在Safari（苹果系统）。有没有适用于所有浏览器的解决方法？添加1px使得在浏览器中使用像Chrome和Firefox一样的calc（）工作起来很奇怪。 – Froxx 2016-09-07 13:33:45