Warum fett Monoface vertikal verschieben auf Windows?

StackOverflow https://stackoverflow.com/questions/2432328

Frage

In Firefox 3.6, Internet Explorer 7 und Opera 10 auf Windows, das HTML ein ungeradees Verhalten: 

<html><head></head>
<style>
span {
    font-family: monospace; background-color: green;
}
span.b {
    font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

Die fett Spanne in der Mitte um ein Pixel nach unten verschoben. Das nicht für andere Schriftarten passieren.

Warum ist das so? Wie kann ich das Problem beheben?

War es hilfreich?

Lösung

  

Warum?

Ausgezeichnete Frage. eine halbe Stunde nur damit verbracht, das herauszufinden, warum, ohne Erfolg. Marcgg Lösung scheint nicht zu arbeiten, entweder die Offset immer noch da. Google taucht nichts. Dies scheint nur unter Windows passieren, nicht nur in den Browsern Sie erwähnen, aber auch in Opera 9 und IE6. nicht in Firefox 2.0 though. Rätselhaft.

  

Wie kann ich das Problem beheben?

Die einzige Lösung, die bisher für mich gearbeitet hat, ist dies: 

span {
    font-family: Courier; background-color: green;
}
span.b {
    font-weight: bold;
}

d., Courier statt Monospace angibt. Dadurch wird konsequent in allen Browsern ich getestet (IE6, Opera 9, FF 2.0 unter Windows 2000, Opera 10, FF 3 und Konqueror unter Ubuntu). Wie, warum, habe ich noch keine Ahnung.

Andere Tipps

Es ist nur ein optischer Effekt. Schnappen Sie sich einen Screenshot und zoomen. Sie die Textgrundlinie ändert sich überhaupt nicht sehen werden

Es sollte sich beheben, wenn Sie einen anderen Farbkontrast wählen.

Update

alt text http://img690.imageshack.us/img690/421/opticaleffect .png

Das Problem ist die Schriftart „Courier New“, die die Standardschriftart verwendet meine die meisten Windows-Browser, wenn „Monospace“ angefordert wird. Für die Tapferen Variante ist die Basislinie an einem anderen Offset: 

<html><head></head>
<style>
span {
    font-family: "Courier New"; background-color: green;
}
span.b {
    font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

Mit diesem Code können Sie sehen, dass der mittlere Text nach oben verschoben wird (= unterschiedliche Baseline-Offset), aber die Hintergrundfarbe ausgerichtet ist nun korrekt.

Die Lösung ist auf Anfrage „Courier“ als Schriftart und zu vermeiden „Courier New“.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top