c'è un reset di testo css?

Question

ciao ho questo problema:

come si può vedere il lato sinistro v'è uno screenshot di come sia in cromo, lato destro firefox. il testo non ha la stessa altezza. la struttura dell'html è semplice e tranquilla. è solo un div in cui è un fieldset in cui è posto un tag h1. intorno a ciò c'è un confine di 1px. il tag h1 ha un'altezza di 20 px e persino un'altezza della linea di 20 px. il prossimo è un tag h2 con le stesse dimensioni. il problema è l'altezza del testo.

in Firefox sembra che questo è 1px inferiore rispetto a Chrome e Safari.

sto usando un reset css da meyer eric nella sua ultima versione. quindi non dovrebbe essere causato da questo.

Sarebbe bello se qualcuno avesse suggerimenti per aiutarmi.

grazie mille.

Answer 1

L'altezza di riga predefinita varia in base a un ampio margine in diversi browser e per diverse famiglie di font con dimensioni di carattere diverse. Impostazione di un indirizzo di altezza riga esplicito.

Ciò è dovuto alle differenze nel modo in cui i browser gestiscono il posizionamento del testo subpixel. Se l'altezza della linea è di 20 pixel ma la dimensione del font è 15 pixel, il testo deve essere posizionato a 2,5 pixel dalla parte superiore della casella di riga. Gecko lo fa e WebKit arrotonda le posizioni a pixel interi. In alcuni casi, i due approcci forniscono risposte che differiscono di un pixel.

In ogni caso, assicurandosi che il proprio semitono sia un numero intero (vale a dire che l'altezza della riga meno la dimensione del font è pari) renderà il rendering più coerente se davvero necessario.

Prova questa:

div h1 { 
    -webkit-padding-before: 1px; 
} 

---

Un'altra possibile soluzione:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    div h1 { 
     line-height:19px; 
    } 
}