Incoerenza di base nei caratteri tra Firefox/Mac e Safari/Mac o Firefox/Win

Question

Notando una strana anomalia di rendering in Firefox 3.5/3.6 (non ho provato altre versioni) in Mac OS X. Guardandomi intorno, ho visto simili problemi segnalati e indirizzati, ma la maggior parte riguardava l'altezza della linea CSS impostata su normale rispetto alla misurazione di un'unità.

prendere il codice seguente:

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

<h1>This is a test</h1> 

In Firefox per Mac, la linea di base del testo siede superiore a quello degli altri browser - tra cui Firefox per Windows. Qualcuno ha affrontato questo problema prima? È solo Firefox per Mac che è il browser dispari fuori. Ho anche notato che questo è basato sui font; il passaggio ad Arial, ad esempio, rende costantemente ovunque. Sfortunatamente, cambiare il font non è un'opzione per me. E vorrei evitare di creare immagini di tipografia se posso.

Sono grato per qualsiasi intuizione! Grazie per aver dato un'occhiata!

Answer 1

Hai presentato un esempio molto interessante delle lievi differenze tra il rendering dei caratteri su Firefox per Mac rispetto ad altri browser. Direi che FF su Mac si sta comportando male qui, anche se l'impostazione vertical-align: baseline; non modifica il risultato.

Detto questo, non c'è assolutamente alcun motivo per utilizzare le immagini qui per emulare il rendering di un browser. Un sito Web non deve avere lo stesso aspetto in tutti i browser.

Answer 2

Il problema si verifica probabilmente a causa di Mac e Safari ottimizzati per la tipografia molto più di qualsiasi altro browser o sistema operativo. È più probabile che visualizzi correttamente i caratteri come dovrebbero essere visualizzati. Ho letto di questo in innumerevoli occasioni nel corso degli anni ma, sfortunatamente, non riesco a ricordare nulla al di là di questo. Sono sicuro che qualcuno verrà con un link che lo spiega ulteriormente.

Answer 3

So che questa è una vecchia domanda, ma mi sono imbattuto in esso mentre cercavo una soluzione alternativa per lo stesso problema. Da un sacco di ricerca e sperimentazione sembra essere uno di quei 'Windows contro il resto del mondo' cose tipo (sorpresa sorpresa!) Ecco la mia jQuery risolvere ...

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

Poi ho solo di mira il h1 con html.windows h1 per correggere la differenza con css su Windows.

Potrebbe aiutare qualcuno in futuro!