conflitti tra linea-altezza e altezza reale quando corsivo è utilizzato

Question

Ho il seguente problema:

Ho un elemento lunghi, con 18 px line-height e 16px font-size. Funziona alla grande quando il testo all'interno non è in corsivo; lo span rimane alto 18 pixel.

Il problema si presenta quando il testo all'interno dello span è in corsivo o grassetto. Per qualche motivo, l'altezza dell'elemento span aggiunge un pixel e ottengo un intervallo di 19 pixel.

Questo problema è solo su firefox. IE, Safari, Opera e Chrome non hanno questo problema. Lo span rimane alto 18 pixel, non importa quale.

qualcuno ha avuto questo problema prima?

Questo è il codice incriminato:

span 
{ 
    font-size : 18px ; 
    line-height : 18px ; 
} 

span.italicSpan 
{ 
    font-style : italic; 
} 

C'è un esempio qui:

http://edincanada.co.cc/test/shjs-0.6/test7.html

Si prega di verificare gli altri browser, se lo si desidera. Noterai che gli elementi di span sono alti 18 pixel, poiché devono essere mantenuti in base all'altezza della riga: 18px

Answer 1

Non è possibile regolare l'altezza della linea di un elemento in linea. È necessario farlo fluttuare o impostarlo su display: block o display: inline-block.

Answer 2

Per quanto possibile (visualizzando la pagina di esempio su Firefox 8 con Firebug installato), il problema esiste anche per il primo elemento div.

Il motivo è che, per impostazione predefinita, l'elemento div eredita l'altezza della riga dal suo padre, che ha 19px come valore (ciò dipende dal tipo di carattere e dal browser). Impostare l'altezza della linea su un elemento interno implica semplicemente un limite inferiore sull'altezza della linea effettiva.

Pertanto, la soluzione consiste nell'impostare l'altezza della riga sull'elemento di livello blocco che la racchiude (o per trasformare l'elemento span in un elemento di blocco in visualizzazione, come suggerito in un altro elemento).

Answer 3

Mi sono imbattuto anche in questo problema. Penso che sia correlato a determinati tipi di carattere (l'ho dovuto succedere con Sorts Mill Goudy, ad esempio) e in che modo i loro caratteri in corsivo sono stati ridimensionati rispetto alle loro lettere romane. L'altezza di una linea dipende dal "content box" degli elementi inline in esso, e quindi il corsivo più grande può rovinare l'altezza calcolata della linea.

L'unica soluzione affidabile che ho trovato (oltre a utilizzare un font diverso) è quella di giocare con la proprietà vertical-align del corsivo. Quando il corpo del testo è allineato a baseline, ho riscontrato che l'allineamento verticale del corsivo a top o bottom della linea consente di ordinare le cose.

Ovviamente, ora il corsivo è sottilmente disallineato rispetto al corpo del testo! Alla fine, sta a voi decidere se questo aiuti o meno.