Baseline-Inkonsistenz in den Fonts zwischen Firefox/Mac und Safari/Mac oder Firefox/Win

Question

Bemerkenswerte seltsame Rendering-Anomalie in Firefox 3.5/3.6 (habe keine anderen Versionen ausprobiert) in Mac OS X. Um mich herum gesehen habe ich ähnliches gesehen Probleme gemeldet und adressiert, aber die meisten waren CSS-Zeilenhöhe auf normal im Gegensatz zu einer Maßeinheit festgelegt.

Nehmen Sie den folgenden Code ein:

<style> 
    h1{ 
     background-color:#f00; 
     font-size:40px; 
     line-height:40px; 
    } 
</style> 

<h1>This is a test</h1> 

In Firefox für Mac, die Textgrundlinie sitzt höher als in den anderen Browsern - einschließlich Firefox für Windows. Ist jemand schon einmal mit diesem Problem konfrontiert worden? Es ist nur Firefox für Mac, dass der seltsame Browser aus ist. Ich habe auch bemerkt, dass dies font-basiert ist; B. zu Arial wechseln, wird überall konsistent gerendert. Leider ist das Ändern der Schriftart keine Option für mich. Und ich möchte es vermeiden, Bilder von Typografie zu schaffen, wenn ich kann.

Ich bin dankbar für jede Einsicht! Danke für einen Blick!

Answer 1

Sie haben ein sehr ansprechendes Beispiel für die geringfügigen Unterschiede zwischen der Schriftdarstellung auf Firefox für Mac im Vergleich zu anderen Browsern dargestellt. Ich würde sagen, FF auf Mac ist hier falsch, da auch die Einstellung vertical-align: baseline; das Ergebnis nicht ändert.

Das heißt, es gibt absolut keinen Grund, Bilder hier zu verwenden, um die Wiedergabe eines einzelnen Browsers zu emulieren. Eine Website muss nicht in allen Browsern gleich aussehen.

Answer 2

Das Problem tritt wahrscheinlich aufgrund von Mac und Safari auf Typografie weit mehr als alle anderen Browser oder Betriebssystem eingestellt. Es ist wahrscheinlicher, dass Schriftarten korrekt angezeigt werden, wie sie angezeigt werden sollten. Ich habe im Laufe der Jahre unzählige Male davon gelesen, kann mich aber leider nicht mehr daran erinnern. Ich bin mir sicher, dass jemand mit einem Link kommen wird, der das weiter erklärt.

Answer 3

Ich weiß, dass dies eine alte Frage ist, aber ich stolperte darüber, als ich nach einem Workaround für das gleiche Problem suchte. Von vieler Forschung und Erprobung es einer jener ‚Windows-gegen den Rest der Welt‘ Art Dinge zu sein scheint (was für eine Überraschung!), So ist hier meine jQuery fix ...

var OSName=""; 
if (navigator.appVersion.indexOf("Win")!=-1) OSName="windows"; 
$('html').addClass(OSName); 

Dann einfach targetted ich die h1 mit html.windows h1, um den Unterschied mit CSS unter Windows zu beheben.

Könnte jemandem in der Zukunft helfen!