Gibt es einen CSS-Text-Reset?
Hallo, ich habe dieses Problem:
wie Sie auf der linken Seite sehen können, ist ein Screenshot, wie es in Chrom ist, rechts Firefox. der Text hat nicht die gleiche Höhe. Die Struktur des HTML ist leise einfach. es ist nur ein div, in dem ein fieldset ist, in dem ein h1 tag steht. um das gibt es eine Grenze von 1px. Dieses h1-Tag hat eine Höhe von 20px und sogar eine Zeilenhöhe von 20px. Als nächstes folgt ein h2-Tag mit den gleichen Größen. das Problem ist die Texthöhe.
in Firefox scheint es, dass dies 1px niedriger ist als in Chrom und Safari.
ich benutze ein css reset von eric meyers in seiner neuesten version. also sollte das nicht dadurch verursacht werden.
es wäre toll, wenn jemand Hinweise hätte, um mir zu helfen.
vielen Dank.
1 Antwort
Die Standard-Zeilenhöhe variiert in verschiedenen Browsern und für verschiedene Schriftfamilien in verschiedenen Schriftgrößen sehr stark. Das Setzen einer expliziten Zeilenhöhe adressiert das.
Dies liegt an Unterschieden in der Art und Weise, wie Browser die Subpixel-Textpositionierung handhaben. Wenn die Zeilenhöhe 20 Pixel beträgt, die Schriftgröße jedoch 15 Pixel, muss der Text 2,5 Pixel vom oberen Rand der Zeilenbox entfernt positioniert werden. Gecko macht das tatsächlich und WebKit rundet Positionen auf ganzzahlige Pixel auf. In einigen Fällen geben die beiden Ansätze Antworten, die sich um ein Pixel unterscheiden.
Wenn Sie sicherstellen, dass die Hälfte des Zeilenabstandes eine Ganzzahl ist (d. h. die Zeilenhöhe minus die Schriftgröße ist gerade), wird das Rendering konsistenter, wenn Sie das wirklich brauchen.
Versuchen Sie Folgendes:
%Vor%Eine andere mögliche Lösung:
%Vor%