9 
<div id="outerDiv">
    <div id="innerDiv"></div>
    <div id="remainderDiv"></div>
</div>

#outerDiv, #innerDiv, #remainderDiv{
    height: 100px;
}
#outerDiv{
    width: 55.5px;
    z-index: 1;
    background-color: red;
}
#innerDiv{
    width: calc(100% - 10px);
    z-index: 100;
    background-color: blue;
    float: left;
}
#remainderDiv{
    width: 10px;
    z-index: 100;
    background-color: green;
    float: left;
}

http://jsfiddle.net/yz8cwj3a/

結果: http://i.imgur.com/DYor2yb.png

このフィドルは、Chrome 37 の問題を示しています。小数ピクセルの要素で calc(100% - 10px) 関数を使用すると、常に切り捨てられます。これは奇妙なことを引き起こします。

この例では、外側の div の幅は 50.5px です。内側の 2 つの div の幅は calc(100% - 10px) と 10px です。これは合計で 50.5 になるはずですが、それでも赤い背景が表示されます。

この問題は Chome 37 で導入されたようです。この問題がすでに報告されているかどうか、および/または解決されるかどうかを知っている人はいますか?

編集:コメントから、この問題はすでに長期間存在していることを理解しています。これを修正する（クロスブラウザ）きちんとした方法はありますか？

4

2 に答える 2

3

これは Chrome の既知のバグであり、現在は修正されており、まもなく開発チャンネルに統合される予定です。

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

于 2015-01-30T01:54:34.320 に答える