Update: Einfache Testbeispiel http://jsfiddle.net/7UhrW/1/ mit normalize.css hinzugefügt.Sehr unterschiedliche Schriftgrößen in allen Browsern
Chrome/WebKit und Firefox haben unterschiedliche Rendering-Engines, die Fonts unterschiedlich darstellen, insbesondere mit unterschiedlichen Dimensionen. Das ist nicht zu überraschend, aber was ist überraschend ist die Größenordnung einiger der Unterschiede.
Ich kann immer einzelne Elemente auf einer Seite optimieren, um ähnlicher zu sein, aber das ist mühsam, um es gelinde auszudrücken. Ich habe nach systematischeren Lösungen gesucht, aber viele Ressourcen (z. B. SO-Antworten) sagen einfach "verwende ein Reset-Paket". Während ich sicher bin, dass dies eine Reihe von anderen Dingen wie Padding und Abstand behebt, scheint es keinen Unterschied für die Schriftgröße zu machen.
Zum Beispiel, wenn ich das Reset-Paket von http://html5reset.org/ nehme, kann ich ziemlich große Unterschiede zeigen (beachten Sie die Layout-Abmessungen in den Inspektoren gezeigt). [Die folgenden Bilder sind tatsächlich höher res als/in dieser Antwort verkleinert dargestellt - z. B. in Chrome können Sie mit der rechten Maustaste und öffnen Bild in neuem Tab]
<h1 style="font-size:64px; background-color: #eee;">Article Header</h1>
Mit Helvetica, Chrome hat die kürzere Höhe stattdessen.
<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>
Mit einem different font, wieder Chrome macht eine viel größere Schrift, sondern zusätzlich der Buchstabenabstand geht drunter und drüber (wahrscheinlich aufgrund der boldification der Schrift):
<style>
@font-face {
font-family: "MyriadProRegular";
src: url("fonts/myriadpro-regular-webfont.eot");
src: local("?"), url("fonts/myriadpro-regular-webfont.woff") format("woff"), url("fonts/myriadpro-regular-webfont.ttf") format("truetype"), url("fonts/myriadpro-regular-webfont.svg#webfonteknRmz0m") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "MyriadProLight";
src: url("fonts/myriadpro-light-webfont.eot");
src: local("?"), url("fonts/myriadpro-light-webfont.woff") format("woff"), url("fonts/myriadpro-light-webfont.ttf") format("truetype"), url("fonts/myriadpro-light-webfont.svg#webfont2SBUkD9p") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "MyriadProSemibold";
src: url("fonts/myriadpro-semibold-webfont.eot");
src: local("?"), url("fonts/myriadpro-semibold-webfont.woff") format("woff"), url("fonts/myriadpro-semibold-webfont.ttf") format("truetype"), url("fonts/myriadpro-semibold-webfont.svg#webfontM3ufnW4Z") format("svg");
font-weight: normal;
font-style: normal; }
</style>
...
<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>
Wenn wir versuchen, das Unitless * { line-height: 1; } einzuspritzen, wie von AC vorgeschlagen omment, sehen wir, dass es zwar identische Höhen hat ergeben, werden die vertikalen Versatz verschieden sind, wie auch andere Elemente auf der Seite:
Ich habe versucht, ein paar Resets/normalisieren Pakete ohne Erfolg. Ich wollte nur bestätigen, dass dies in der Tat eine Tatsache des Lebens ist (sogar die eklatanteren Täter wie IE und Mobile ausblendend) und ich verpasse keine super tolle Lösung für dieses Durcheinander.
Haben Sie 'Line-height' für Ihre' BODY' Element angeben, versucht ? Standard-Zeilenhöhen sind in verschiedenen Browsern unterschiedlich. –
@MaratTanalin: Nun, Dinge wie explizite Zeilenhöhen sind der ganze "langweilige" Ansatz, auf den ich mich bezog - ja, ich kann eine angemessene Höhe für jeden einzelnen Teil meiner Seiten bestimmen, und tatsächlich tue ich das bis zu einem gewissen Grad Aber ich frage mich, ob es einen besseren Weg gibt. Ein großer Teil meiner Frage zeigte genau, wie verschiedene Browser unterschiedliche Zeilenhöhen (und damit Höhen) einstellen. – Yang
Sie können den unitless Wert für 'line-height' verwenden. Zum Beispiel, Zeilenhöhe: 1.25'. Es ist vollkommen richtig und hat keine negativen Folgen. –