line-height 2px tiefer im firefox vs webkit

Habe ich Folgendes css:

.btn_container {
cursor: pointer;
font-family: Tahoma,Verdana,Arial;
font-size: 11px;
padding: 0;
width: auto;
}

.btn_center {
background: blue;
color: #FFFFFF !important;
display: block;
float: left;
font-weight: bold;
height: 32px;
line-height: 32px;
padding: 0 10px;
}

line-height von 30 Zeilen-up-center in firefox, aber 32 in webkit.

Ich wissen Browser Rendern die Dinge anders, aber ich hatte noch nie ein problem, den text zu zentrieren, richtig.

Im folgenden Beispiel können Sie sehen, dass es Tropfen ein paar px unteren in firefox:
http://jsfiddle.net/mstefanko/EGzEB/5/

  • sind Sie mit einem CSS-reset stylesheet?
InformationsquelleAutor mstef | 2012-05-25
  1. 10

    Ich getan habe schwere Prüfung dieses in der Vergangenheit. Ich nenne es text wackeln. Es ist nicht etwas, das Sie kontrollieren können. Alles, was Sie tun können, um zu minimieren, ist die Anwendung eines expliziten line-height (vor allem eines, in px) zu jedem text-element.

    Dem Standard line-height variiert von einem breiten Rand in verschiedenen Browsern und aus unterschiedlichen font-Familien in verschiedenen Schriftgrößen. Einstellung eine explizite line-height-Adressen.

    Aber innerhalb dieser, die genaue Platzierung des Textes innerhalb der Zeile-Höhe Raum wird leicht variieren-browser-zu-browser, egal was Sie tun. Für einige Kombinationen von font-size und line-height, alle Browser übereinstimmen. Zum Beispiel, Arial bei font-size:11px und line-height:14px macht das gleiche im FF, Webkit und IE. Aber ändern Sie die line-height auf 13px oder 15px, und es variiert von 1px browser-zu-browser.

    Gibt es keine standard-oder definiertem Verhalten für Sie. Es ist das Ergebnis, wie das font-family, font-size und line-height passiert gerendert werden, die vom browser auf diesem Betriebssystem. Arial zum Beispiel ist eine relativ konsistente schriftart, in der Regel nicht unterschiedlicher von mehr als 1px, solange eine explizite line-height definiert ist, während die Helvetica variiert von 4 bis 6 Pixel.

    • font-family:Arial;font-size:11px;line-height:14px nicht ordnungsgemäß gerendert, für mich, richtig in Firefox auf OSX.
    InformationsquelleAutor Matt Coughlin
  2. 8

    Hatte ich die gegenteilige Erfahrung eigentlich. Ich stellte fest, dass einige header-Elemente wurden höher positioniert im IE7/Kompatibilität Modus sowie Google Chrome/Safari. So nach viel Mühe habe ich überprüft mit chrome und sah -webkit-margin-vor: 1.6 em oder etwas Hinzugefügt, um Header. Hinzufügen, dass Wert-und tweaking-es hat nicht funktioniert, weil es bewirkt die Höhe der Kopfzeile die dazu führte, dass einige Elemente unten, aber die Polsterung option, die gut für mich gearbeitet ...

    Fand ich, dass dies für mich gearbeitet:

    H1, H2, H3, H4, H5, a.mainTab div {
  -webkit-padding-before: 1px;
}

    ein.mainTab div hatte überspannt, die würde nicht reagieren auf die padding/margin so wickelte Sie in ein div ... das kann funktionieren, für li span Header genauso.

    InformationsquelleAutor Kris
Schreibe einen Kommentar