Ergebnis: Ссылка
Diese Geige zeigt ein Problem mit Chrome 37. Wenn Sie die Funktion calc (100% - 10px) für ein Element mit Dezimal-Pixeln verwenden, wird es immer abgerundet. Dies verursacht seltsame Dinge.
In dem Beispiel hat das äußere div eine Breite von 50.5px. Die zwei inneren divs haben calc (100% - 10px) und 10px als Breiten. Obwohl dies insgesamt 50,5 sein sollte, zeigt es immer noch den roten Hintergrund.
Problem scheint in Chome 37 eingeführt zu werden. Weiß jemand, ob dieses Problem bereits gemeldet wurde und / oder ob es gelöst wird?
Bearbeiten: Ich verstehe aus den Kommentaren, dass das Problem schon länger besteht. Gibt es einen (browserübergreifenden) sauberen Weg, um das zu beheben?
Nach der Überprüfung der Elemente scheint es klar zu sein:
1) width: 55.5px; wird auf 56px und
2) width: calc(100% - 10px); - die 100% Breite wird auf 55px abgerundet
das lässt 1 px links von Rot in dem 56px breiten Behälter.
Als Workaround verzichten Sie einfach auf das Hinzufügen einer Breite resteDiv,
und verwenden Sie eine andere Methode zum "Auffüllen" des Containers wie overflow:hidden
Auf diese Weise wird das Rest-Div entweder 10px oder 11px sein - aber zumindest das Layout wird nicht brechen
Tags und Links css google-chrome css-calc
