CSS calc() 四舍五入

Question

这个问题类似于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);有没有更好的解决方案？

Answer 1

此问题已在 Chrome 中修复了一段时间。

https://bugs.chromium.org/p/chromium/issues/detail?id=448796&q=label%3ACr-Blink&colspec=ID+Pri+M+Week+ReleaseBlock+Cr+Status+Owner+Summary+OS+Modified