Warum fügt eine Schriftgröße > 0 der Webkomponente, auch bekannt als benutzerdefiniertes HTML-Element, zusätzliche Höhe ⇐ HTML

[Guest]

Ich kann das hier nicht in einem Snippet zum Laufen bringen, daher ist hier meine Testseite auf meiner Github-Seiten-Site: https://sidewayss.github.io/scratch/wc-bugs.html
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

Dies ist der betreffende :

Code: Select all

<svg>:

span

Da ist nicht viel dabei. Das ist in beiden Fällen 48px groß. Die zusätzliche Höhe befindet sich vollständig im benutzerdefinierten Element und am unteren Rand des Elements.
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