Rolf B: border-width - kann sie Nachkommastellen haben?

Beitrag lesen

SELF-Forum

border-width - kann sie Nachkommastellen haben?

Rolf B
– Informationen zu den Bewertungsregeln

Hallo alle,

ich bin auf einigen Umwegen zu dieser Frage gekommen - eigentlich ging es mir um eine Bemerkung in MDN, wonach clientLeft/clientTop die Position der linken oberen Ecke der Padding Box[1] eines Elements liefern (es sei denn, es ist inline), und zwar relativ zur linken oberen Ecke der vollständigen Box des Elements. Oder mit anderen Worten und den Worten der Spec: clientLeft = border-left-width und clientTop = border-top-width.

Aber mit einer Einschränkung: clientLeft und clientTop liefern nur ganzzahlige Werte. Und man solle element.getBoundingClientRect() verwenden, wenn man die Werte inclusive der Nachkommastellen haben wolle.

Ah. Oh. Hä?

getBoundingClientRect liefert mir doch das Rechteck, das die Elementbox einnimmt, relativ zum Viewport. Okay, das tut es mit Nachkommastellen, aber was hilft mir das bei clientLeft/clientTop? Bevor ich ein MDN Issue einstelle, wollte ich mir anschauen, welche SINNVOLLEN Wege es gibt, an clientLeft/clientTop mit Nachkommastellen heranzukommen.

Und es macht den Anschein, als gebe es keinen sinnvollen Weg. Weil es nämlich den Usecase gar nicht gibt. Weil ich es nämlich zum Verrecken nicht hinbekomme, Ränder mit einer non-integer Breite zu setzen.

Die Spec sagt dazu nichts. Nur: <length> oder thin/medium/thick. Ich habe es mit Chrome und Firefox probiert. Methode:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box {
  width: 200px; height: 50px;
  box-sizing: content-box;   /* Bevor mir einer hiermit ankommt */
  border: 1px solid red;
}

und die border-Angabe von 1px auf 1.5px geändert. Und? Es rührt sich nichts. Erwartetes Ergebnis: Der Stapel wird 5px höher.

Kontrollversuch mit der Höhe: height:50px vs height:20.5px - jau. Da tut sich dann was.

Also sprach das Gretchen: Lieber Heinrich Browser - wie hältst Du's mit den Nachkommastellen bei Rändern?! Kann mir das jemand verbindlich bequellen?

Rolf

--
sumpsi - posui - obstruxi

  1. Paddingbox = Client Box plus Paddingbereich. Oder Außenrand der Box minus Rand ↩︎

Beitrag melden
–
Informationen zu den Bewertungsregeln