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