Beachten Sie die obere Zeile mit der Bezeichnung :, die beiden Rechtecke. Es handelt sich um dasselbe benutzerdefinierte Element-Tag mit unterschiedlichen Schriftgrößen. Das linke Rechteck verwendet die CSS-Standardeinstellung „font-size:0“, das rechte Rechteck verwendet „font-size:2rem“. Der Höhenunterschied zwischen den beiden beträgt 8 Pixel, was 1/4 der 32 Pixel-Schriftgröße entspricht. Wenn Sie die Höhe auf 1rem setzen, schrumpft der Höhenunterschied auf 4 Pixel.
Hier ist ein Screenshot, bei dem der Abstand der Elemente auf Null gesetzt ist, sodass die Die zusätzliche Höhe ist gut sichtbar:

Dies ist die Vorlage:
Code: Select all
Code: Select all
<svg>:
span
Ich kann dies in den neuesten Versionen von Chrome und Firefox unter Windows 11 reproduzieren. Warum funktioniert die Einstellung a Eine Schriftgröße größer als Null erhöht die Höhe dieses benutzerdefinierten Elements? Es zwingt mich dazu, die Schriftgröße:0 in CSS hart festzulegen, sonst erbt es tendenziell etwas > 0.
Wenn es hilft, der Quellcode ist hier, zwei Dateien: wc-bugs.html und wc-bugs.js