Seltsames Randbreitenverhalten in Chrome - Fließkomma-Randbreite?

Bestimmte flüssige Designs, insbesondere solche, die iFrames in% -Breite enthalten, scheinen in Chrome einige seltsame Fehler beim Runden zu verursachen (Version 21).Seltsames Randbreitenverhalten in Chrome - Fließkomma-Randbreite?

This Fiddle zeigt das Problem. Setzen Sie den Rahmen auf einen ganzzahligen Pixelwert, und die Werte, die Sie erhalten, wenn Sie danach gefragt werden, sind Fließkommazahlen, die geringfügig kleiner als der erwartete Wert sind.

Der Versuch, exact same code in CodePen auszugeben, führt nicht zu den gleichen Ergebnissen, vermutlich weil der iFrame und andere Stile um ihn herum nicht auf dieselbe Weise eingerichtet sind.

(Ich habe dieses Verhalten auch für die Grundbreite gesehen und Höhenattribute, obwohl ich nicht in der Lage war, dass ein Teil des Problems in jsFiddle zu replizieren.)

Dies scheint nicht ein Problem in Firefox zu sein oder in IE8.

Irgendwelche Ideen, was speziell dieses merkwürdige Verhalten verursacht, und wie ich es umgehen kann, um zu den wirklichen Werten zu gelangen?

Die Handlung verdickt sich. Bei dem Versuch, das Problem zu umgehen, stellte ich fest, dass Werte über 10px anscheinend nicht dem Problem unterliegen.

Auch basierend auf @ GionaF Kommentar, scheint es richtig in Chrome zu arbeiten 22

Quelle

2012-10-12 Chris Jaynes

Eigentlich bekomme ich 3px (Chrom 22) – Giona

Beh. Danke, dass Sie es @GionaF angesehen haben. Leider habe ich nicht die Option, im Moment zu aktualisieren ... –

Kürzlich hatte ich ein Problem mit Chrome: versuchen, die ungerade Breite Block (49px) bei der 50% Breite zu positionieren, bekam ich ein bisschen verschiedene Positionen +/- 1 Pixel auf geraden und ungeraden Bildschirmbreiten. Ich löste das Hinzufügen von 1px Padding, um sicherzustellen, dass der Block mit gerade ist. Hoffe, dieser Tipp hilft dir. –

Um Ihr Problem zu reproduzieren, muss ich die Zoomstufe von Chrome ändern. Wenn Sie den Zoom-Wert wieder auf 100% zurücksetzen, wird er behoben. Es scheint ein Fehler zu sein, die berechnete Randbreite ist immer kleiner als die definierte Randbreite, hinein- oder herauszoomen!

Ihr 10px-Rahmen gibt einen Wert von 10, wenn der Zoom-Level 110% ist, aber bei 125% hat es das gleiche Problem wie Ihr 3px-Rahmen.

edit: firefox hat das gleiche Verhalten!

Quelle

2013-05-24 16:29:44 Willem

Dies ist letztendlich der zuverlässigste Weg, um das Problem neu zu erstellen. Ich glaube nicht, dass ich ein Zoom-Level hatte, als ich das Problem anfänglich hatte, aber es ist schön zu wissen, dass es durch Zoomen neu erstellt werden kann. –

In meinem Fall wurde mein Zoom auf 90% eingestellt (passiert gelegentlich, wenn die Scrolltaste und die Strg-Taste so oft wie ich verwendet werden), und so wurden meine 1px-Ränder als 1,11x oder etwa 10% breiter berechnet, als sie sollten gewesen. – redOctober13

Ich kann dieses Verhalten in Chrome noch nicht reproduzieren, aber dieses Verhalten am meisten hat wahrscheinlich mit Subpixel Rendering zu tun. Im Wesentlichen wird Webkit Berechnungen mit Ganzzahlmathematik durchführen, um eine Ungenauigkeit der Fließkommazahl zu vermeiden.

Es scheint, dass border derzeit kein Subpixel-Rendering verwendet, was erklären könnte, warum das Problem in neuen Chrome-Versionen nicht sichtbar ist.

Quelle

2013-05-19 14:35:13

Ich habe diese Antwort gewählt, weil ich denke, dass es wahrscheinlich richtig ist, dass es mit Sub-Pixel-Rendering zu tun hat, aber ich mochte, dass Willems Antwort mir erlaubte, das Verhalten zumindest nachzubilden. Ich vermute, dass es in der von mir verwendeten Chrome-Version einen Subpixel-Rendering-Bug gab, vielleicht sogar im Zusammenhang mit dem Zoomen, aber es ist wahrscheinlich zu weit zurück, um es sicher zu wissen. Danke, dass du dir die Zeit genommen hast zu antworten! –

Hilft die Einstellung der Boxgröße für alle Elemente? Dies ändert die Art und Weise, wie das Boxmodell berechnet wird, wobei der Rahmen und der Abstand die Breite nicht beeinflussen.

*, 
*:before, 
*:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; }

Quelle

2013-05-24 00:15:35 Alex

Ich hatte auch das Problem mit der Grenze in input s und anderen Elementen. Nach einer Stunde verbrachte ich einen unerwarteten Grund, dieses Problem zu verursachen. Bootstrap CSS verwendet normalize css und der folgende Code verursacht wurde so Ausgabe:

hr { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
}

Um dieses Problem zu lösen, überschreiben ich die CSS in meiner style.css:

hr { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

Die hr Regel wirklich nicht im Zusammenhang mit input s aber es funktioniert. Das ist wirklich unerwartetes Verhalten, probiere es aus und werde funktionieren.

Quelle

2017-11-03 06:43:28

Seltsames Randbreitenverhalten in Chrome - Fließkomma-Randbreite?

Antwort

Verwandte Themen