<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

Ergebnis:http: //i.imgur.com/DYor2yb.pn

Diese Geige zeigt ein Problem mit Chrome 37. Wenn Sie die Funktion calc (100% - 10px) für ein Element mit Dezimalpixeln verwenden, wird immer abgerundet. Das verursacht seltsame Dinge.

Im Beispiel hat das äußere Div eine Breite von 50,5 Pixel. Die beiden inneren Divs haben calc (100% - 10px) und 10px als Breiten. Auch wenn dies insgesamt 50,5 sein sollte, wird immer noch der rote Hintergrund angezeigt.

Issue scheint in Chome 37 eingeführt worden zu sein. Weiß jemand, ob dieses Problem bereits gemeldet wurde und / oder ob es behoben wird?

Bearbeiten Ich verstehe aus den Kommentaren, dass das Problem schon länger besteht. Gibt es eine (browserübergreifende) Möglichkeit, dies zu beheben?