FireFox 3 line-height

Question

Firefox 3 hat ein neues Verhalten, bei dem line-height, eingeführt ungesetzt wenn, unterscheidet sich von anderen Browsern, wie es zu machen. So vielleicht ein kritischer Abschnitt in diesem Browser zu hoch machen. Festlegen eines globalen Prozentsatz nicht funktioniert, da es anders Basis. ein einheitsloser Wert wie „1“ Einstellung funktioniert auch nicht. Gibt es eine Möglichkeit, diese Dimension zu normalisieren?

Answer 1

Der berechnete Wert von line-height: normal variiert zwischen Plattformen, Browser (und verschiedene Versionen des gleichen Browser, wie Sie angeben), Schriftarten und sogar verschiedene Größen des gleichen Schriftart (siehe Eric Meyers Artikel) .

ein einheitsloser Wert einstellen, wie ...

body {line-height: 1.2;}

... sollte Arbeit, den Abstand zwischen den Browsern zu normalisieren. Wenn dies nicht funktioniert, können Sie eine detaillierte Beschreibung Ihres Sheet zur Verfügung stellen?

Es ist schwer (unmöglich?) „Pixelgenaue“ Ergebnisse zu erhalten, sondern um Ergebnisse zu erhalten, die so vorhersehbar wie möglich sind, ich versuche, eine Zeilenhöhe zu verwenden, die einen schönen runden Wert erzeugt, wenn durch die font- multipliziert Größe. Wir können nicht wissen, die Standardschriftgröße des User-Agent, aber 16 Pixel ist etwas gemeinsam.

body 
{
    font-size: 100%;
    line-height: 1.5;
}

Wenn die Startschriftgröße des User-Agenten in der Tat 16 Pixel ist dann die Zeilenhöhe von 1.5 kommt zu einem schönen, sogar 24 Pixel. Benutzer können und die Größe Standardschriftart ändern oder die Seite zoomen, obwohl und verschiedene Browser haben unterschiedliche Methoden der Seite Skalierung. Trotzdem glaube ich, dass ich vernünftig Erfolg für die Mehrheit der Nutzer gehabt haben. Wenn ich nicht die Zeilenhöhe kommen genau machen, die ich für ein wenig über dem ganzen Zahl dann schießen anstatt ein wenig unter, weil einige Browser Werte scheinen eher zu kürzen, als um sie.

Beachten Sie auch, dass, wenn Sie einen Prozentsatz für die Zeilenhöhe zu verwenden, es verhält sich anders, wenn der Wert vererbt wird.

body 
{
    font-size: 100%;
    line-height: 150%;
}

p
{
    font-size: 75%;
}

Ausgehend von einer Basisschriftgröße von 16 Pixeln, wird die Zeilenhöhe 24 Pixel betragen. Innerhalb eines <p> Element wird die Schriftgröße 12 Pixel, aber die Zeilenhöhe hat nicht 18 Pixel werden, vielmehr bleibt es 24 Pixel. Das ist der Unterschied zwischen line-height: 1.5 und line-height: 150%. Wenn body {line-height: 1.5;} verwendet wird, die Zeilenhöhe für <p> ist 18 Pixel.

Answer 2

Es gibt absolut nichts, was man tun kann. Jeder Browser hat es Art und Weise CSS und den Inhalt zu machen. Sie können ein „Master“ Reset verwenden (wie cowgod schon sagt), aber auch dann, das ist letztlich nicht die Ausrichtungsprobleme gehen zu beheben. Sie sind da, weil der eigentliche Rendering-Engine. Apple den CSS auf Ihre bestehende Website und testen. Sag mir, wenn es Pixel perfekt auf der ganzen Linie macht. Es wird nicht.

Der einzige Weg, um tatsächlich Pixel Perfektion zu erreichen, ist spezifische CSS für bestimmten Browser zu implementieren. Mozilla hat die @ -moz-doc , hat IE ist es eigene Hacks , aber keiner von ihnen sind Teil der W3C-Spezifikationen, und wir alle wissen Standards wichtig sind. Also nicht viel von einer Option.

Wie David oben gesagt, es ist schwer. Ich bin geneigt, tatsächlich unmöglich zu denken. Und ich habe Stunden damit verbracht, glauben Sie mir! Fast ging verrückt öfter als ich zu zählen kümmern. Es ist eine harte Pille zu schlucken, aber es gibt einfach keinen Weg darum herum, wenn nicht jeder das gleichen Browser-Engine verwendet (die eigentlich das Internet einen großen Sprung nach vorn in meiner Meinung nach nehmen würden). Ich meine, es wäre nicht so schwer sein zu schlagen, was Schnittstelle, die Sie auf Ihrem Browser wollen, so lange, wie Sie Plugin [gecko] [Webkit] [presto] [Dreizack] [was] das Backend zu handhaben ... Seit gut diejenigen sind alle Open Source Sie die Projekte zusammenführen konnte und gehen wirklich bekommen. Die Menschen müssen lernen, schön zusammen zu spielen;)

Answer 3

Sie können dieses Problem lösen:

Stellen Sie Zeilenhöhe auf 1, dann Null in Ihrem Text mit padding-top und padding-bottom, und stellen Sie die Höhe auto.

.zeroed_in_element {
    padding: 4px 2px 5px 2px;
    height: auto;
    line-height: 1;
} 

Answer 4

Sie sollten immer „Reset“ Arten Alle Browser Inkonsistenzen mit Elementstilen zu beseitigen.

Ich mag Eric Meyer CSS zurücksetzen . Yahoo man auch hat.