Altezza della linea di FireFox 3

Question

Firefox 3 ha introdotto un nuovo comportamento in cui l'altezza della linea, quando non impostata, differisce da come viene visualizzata da altri browser.Pertanto, il rendering di una sezione critica potrebbe essere troppo alto in quel browser.L'impostazione di una percentuale globale non funziona, poiché la sua base è diversa.Anche l'impostazione di un valore senza unità come "1" non funziona.Esiste un modo per normalizzare questa dimensione?

Answer 1

Il valore calcolato di line-height: normal varia a seconda della piattaforma, del browser (e delle diverse versioni dello stesso browser, come dici tu), dei caratteri e persino delle diverse dimensioni dello stesso carattere (vedi articolo di Eric Meyer).

Impostazione di un valore senza unità come...

body {line-height: 1.2;}

...Dovrebbe lavorare per normalizzare la spaziatura tra i browser.Se non funziona, puoi fornire una descrizione più dettagliata del tuo foglio di stile?

È difficile (impossibile?) ottenere risultati "pixel-perfetti", ma per ottenere risultati quanto più prevedibili possibile, provo a utilizzare un'altezza di linea che produca un bel valore rotondo quando moltiplicato per la dimensione del carattere.Non possiamo conoscere la dimensione del carattere predefinita dell'agente utente, ma 16 pixel è piuttosto comune.

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

Se la dimensione iniziale del carattere del programma utente è effettivamente 16 pixel, l'altezza della linea di 1.5 esce a un bel, anche 24 pixel.Tuttavia, gli utenti possono modificare la dimensione predefinita del carattere o lo zoom della pagina e browser diversi hanno metodi diversi per ridimensionare la pagina.Tuttavia, penso di aver avuto un discreto successo per la maggior parte degli utenti.Se non riesco a far emergere esattamente l'altezza della linea, allora scatto leggermente sopra l'intero anziché leggermente sotto, perché alcuni browser sembrano troncare i valori anziché arrotondarli.

Inoltre, tieni presente che se utilizzi una percentuale per l'altezza della linea, si comporterà diversamente quando il valore viene ereditato.

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

p
{
    font-size: 75%;
}

Partendo da una dimensione base del carattere di 16 pixel, l'altezza della linea sarà di 24 pixel.All'interno di una <p> elemento la dimensione del carattere diventa 12 pixel, ma l'altezza della linea sì non diventano 18 pixel, anzi restano 24 pixel.Questa è la differenza tra line-height: 1.5 E line-height: 150%.Quando body {line-height: 1.5;} viene utilizzata l'altezza della riga per <p> È 18 pixel.

Answer 2

Non c'è assolutamente nulla che tu possa fare.Ogni browser ha un modo per eseguire il rendering di CSS e contenuto.Puoi utilizzare un ripristino "Master" (come suggerisce Cowgod), ma anche in questo caso, alla fine non risolverà i problemi di allineamento.Sono lì a causa del vero motore di rendering.Apple il CSS sul tuo sito web esistente e testalo.Dimmi se rende i pixel perfetti su tutta la linea.Non lo farà.

L'unico modo per raggiungere effettivamente la perfezione dei pixel è implementare CSS specifici per browser specifici.Mozilla ha il @-moz-doc, IE ha i propri hack, ma nessuno di questi fa parte delle specifiche del W3C e sappiamo tutti che gli standard sono importanti.Quindi non è una grande opzione.

Come ha detto David sopra, è difficile.Sono propenso a pensare che sia impossibile in realtà.E ho passato ore a provarci, fidati di me!Sono quasi impazzito più volte di quante voglia contare.È una pillola difficile da digerire, ma non c'è modo di aggirarla, a meno che tutti non utilizzino lo stesso motore di navigazione (che secondo me farebbe effettivamente fare a Internet un grande passo avanti).Voglio dire, non sarebbe così difficile inserire qualunque interfaccia desideri sul tuo browser, a patto di collegare [gecko] [webkit] [presto] [tridente] [qualunque cosa] per gestire il backend...Dato che quelli validi sono tutti open source, potresti unire i progetti e iniziare davvero.Le persone devono imparare a comportarsi bene insieme ;)

Answer 3

PUOI risolverlo:

Imposta l'altezza della linea su 1, quindi zero nel testo usando padding-top e padding-bottom e imposta l'altezza su auto.

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

Answer 4

Dovresti sempre " resettare " stili per eliminare tutte le incoerenze del browser con gli stili degli elementi.

Mi piace Eric Meyer's Ripristino CSS . Yahoo ne ha anche uno.