Pre-word: inizialmente avevo solo in mente Windows, ma dopo un po 'di test su Mac Air, ho capito che è ancora peggio. Anche se nel codice reale non è una seccatura, anche se c'è qualche incoerenza.rendering line-height css in modo diverso in IE, Safari e Chrome
qui è il test http://jsbin.com/ehegaj/6/edit
In breve, quello che sta succedendo. Ho intestazioni in cui ho applicato la proprietà line-height, si tratta sempre di intestazioni di una riga, quindi ho bloccato l'altezza per adattarla perfettamente ai caratteri. In diversi browser (e sistemi operativi) è possibile vedere il testo in modo diverso. Qualche idea su come risolverlo?
UPD: qui http://jsbin.com/uzucuf/1/edit è un esempio molto vicino del lavoro reale che faccio, ancora una volta non è così male come test di esempio sopra, ma ancora ci sono pixel in movimento.
UPD2:
ha fatto più test concentrandosi principalmente su Windows 7, e non v'è inclusa un'immagine con le schermate di prova nei vari browser con diverse altezze di linea. si poteva vedere l'inconsistenza visiva tra di loro.
http://imageshack.us/a/img845/6734/testheaders.png
Si tratta di 1px, quindi praticamente ho potuto risolvere il problema utilizzando la linea heeight 29px 30px e servire diversa altezza della linea di IE. Anche se lo lascerei solo con l'altezza della linea di 30px e ignorando il safari, quindi a questo punto sono bravo.
Quindi, solo curioso perché è successo? Forzare da questo entusiasta è stato spendere un paio d'ore a navigare risorse diverse:
This guy, sembra avere lo stesso problema, ma è stato semplicemente sbarazzarsi di trovare una domanda sul perché.
Other person uso suggerito solo valori pari a line-height che è un po 'strano al mio punto di vista :) Per favore correggimi se sbaglio qui.
Some other ma l'argomento bit non correlato era solo molto interessante da leggere.
And finaly, sembra di trovare la risposta, è un po 'sfocato ma in realtà ha un senso.
1. Tre set di interlinea valori
per oscuri motivi radicati nella storia dei formati TrueType e font OpenType, ogni webfont trasporta tre set di interlinea valori.Il “vecchio Mac” set, introdotto nel sistema 7. Nel vecchio Mac OS, se un glifo raggiunto al di sopra o al di sotto del “vecchio Mac” linee interlinea, il glifo sarebbe spremuto verticalmente, per adattarsi.
Il "vecchio Windows" set, introdotto in Windows 3.1, in cui qualsiasi parte del contorno che andava sopra o sotto le "vecchie Windows", le linee di salita e discesa non venivano visualizzate sullo schermo (quindi i glifi sarebbero stati ritagliati). Un set "tipografico", apparentemente libero dai limiti degli altri due set.
Il problema, tuttavia, è che molte applicazioni Windows utilizzano ancora i valori "vecchia Windows". Spesso ciò viene fatto intenzionalmente per impedire il riflusso dai documenti creati con applicazioni precedenti.Su Mac OS X, la compressione non si verifica ma la maggior parte delle applicazioni utilizza ancora i valori "vecchio Mac".
Questo bagaglio è stato inserito nei browser. Chrome su Mac OS X utilizza un set di valori diverso rispetto a Chrome su Windows; Firefox su Windows 7 utilizza un set di valori diverso rispetto a Firefox su Windows XP e Firefox su Windows 7 utilizza un set di valori diverso rispetto a Chrome su Windows 7. Le versioni Mac e Windows dello stesso browser utilizzeranno diversi set di valori, mentre diversi i browser sullo stesso sistema operativo possono utilizzare anche valori diversi! In un mondo ideale, la soluzione semplice sarebbe per le fonderie di font assicurarsi che tutte e tre le serie di valori portino allo stesso risultato. Ma molti dei font esistenti sono stati creati prima che i webfonts venissero concepiti, e gli strumenti per la creazione dei font non rendono facile per i type designer rendere questi valori "corretti".
In breve: ci sono molti tipi di carattere là fuori in cui i valori di interlinea portano a incongruenze tra i sistemi operativi e tra i browser.
Ma ancora non sono sicuro al 100% che sia il caso. Qualcuno potrebbe fare una supposizione migliore e dare una risposta più chiara, proprio come la spiegazione per il bambino :)?
Strano, ma troppo Sto notando questo. Forse quello che stai cercando di fare è troppo esatto per la compatibilità tra browser? Potresti dirci cosa stai cercando di fare in modo che possiamo aiutarti a trovare una soluzione alternativa per te? – zeMinimalist
Grazie Simon, sto cercando di creare una sorta di header globale, il codice di testing non è così lontano dal vero, aggiungo che float ha lasciato più altezza e altezza della linea per quello che mi serve. E di nuovo non sembra così male, soprattutto in Mac. Preparerò un campione più vicino più tardi su – dmi3y
Penso che 'height' sul tuo' h1' sia ciò che sta rompendo tutto per te. Ancora una volta, la tua domanda non è chiara, ma guarda cosa succede qui: http://jsbin.com/ehegaj/12/edit – Sparky