この問題は、 Chrome 37 の計算の丸めに似ています
しかし、実際の問題はもう少し複雑で、提供された解決策はこの場合には機能しません。
#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 の幅は、outerDiv の内側にある別の div にあるテキストのランダムな量に依存します。左右の div には画像が含まれているため、幅は静的です。
現在の解決策は、calc を calc(100% - 40px + 1px );に変更することです。より良い解決策はありますか？