【发布时间】：2014-11-14 08:14:34
【问题描述】：
这个问题类似于Chrome 37 calc rounding
但真正的问题有点复杂，提供的解决方案不适用于这种情况：
#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
解释一下：outerDiv 的宽度取决于随机文本数量，该文本位于另一个 div 中，该 div 也在 outerDiv 内部。左右 div 包含一个图像，因此它们的宽度是静态的。
我们目前的解决方案是将calc更改为：calc(100% - 40px + 1px);有没有更好的解决办法？
【问题讨论】：
-
用户提议关闭：问题是Chrome中红线的可见性。问题是如何覆盖 #outerDiv 而不会被内部 div 重叠。
-
关于四舍五入的可怕浏览器差异至少有一个很好的比较：cruft.io/posts/percentage-calculations-in-ie
-
我知道这已经很老了，但这个问题仍然出现在 Safari (MacOS) 上。是否有适用于所有浏览器的解决方法？在 Chrome 和 Firefox 等具有良好 calc() 功能的浏览器中，添加 1px 会使它看起来很奇怪。