Sehen Sie sich dieses Codebeispiel einer Schaltfläche und eines Ankers an: Ссылка
Ich versuche, sie in allen Browsern identisch zu machen. Aber Unterschiede bleiben, und verschiedene Unterschiede in jedem Browser (versucht Chrome, Safari, Firefox, IE8).
Welche CSS-Normalisierungen fehlen mir?
Aktualisierung: Per Vorschlag:
line-height: 50px hinzugefügt (obwohl mein Benutzeragent (Chrome) standardmäßig line-height für button elements ist normal , und zentriert den Text immer noch vertikal - wie?!) cursor: pointer hinzugefügt, um Mauscursor zu normalisieren. Sieh dir nun das Ergebnis in Firefox an: Beachte die Auffüllung der Schaltfläche? Dann schau dir das Ergebnis in IE8 an: Whoa, merke, wie die beiden völlig anders sind?!
Update 2:
Es scheint, dass die Probleme des IE bekannt und nicht lösbar sind: Ссылка
Ich habe jedoch nichts gefunden, was das Auffüllen des Firefox betrifft. (Der quirksmode Artikel erwähnt ein Problem mit Mozilla, aber das ist ein anderes Problem.)
Update 3:
Super, wir haben das Firefox-Problem behoben: Ссылка
Okay, bisher hat jede einzelne Antwort einen Teil der Lösung geliefert, so dass es nicht wirklich eine einzige beste Antwort gibt. Ich werde der Person die beste Antwort geben, die entweder:
line-height: 50px angeben müssen, um Text in a vertikal zu zentrieren, während button vertikal zentrierten Text mit nur line-height: normal hat. Sie können diese zusätzliche Auffüllung in Firefox entfernen, indem Sie:
verwenden %Vor%Hier ist eine gute Erklärung von Eric Meyer über die Zeilenhöhe, die hoffentlich erklärt, warum Sie sie explizit als 50px einstellen müssen: Ссылка .
Hier ist ein neues CSS, das das Problem der Schriftgröße in IE behebt:
%Vor% füge das Attribut cursor:pointer; hinzu, um einen Zeiger hinzuzufügen, wenn die Maus den Mauszeiger berührt (die Eingabe hat sie nicht immer)
und zuletzt line-height:46px; für die vertikale Ausrichtung verwenden
der vollständige Code ist hier - & gt; Ссылка