Scritto da Jeroen Mulder
Torna all'indice Articolo originale
Introduzione
IE/Win continua a stupirci. Questo demo descriverà un bug dove l'interlinea resa in modo sbagliato se la riga contiene un elemento rimpiazzato. Molto semplicemente, se l'interlinea predefinita viene cambiata in un valore più alto, la spaziatura sopra e sotto ogni riga di testo che contiene un elemento rimpiazzato, come una emoticon, sarà la metà della spaziatura vista altrove nel testo.
- Browser colpiti
-
- Microsoft Internet Explorer 5.01 / Windows
- Microsoft Internet Explorer 5.5 / Windows
- Microsoft Internet Explorer 6
Descrizione
Il grafico mostra l'errata resa di IE dell'interlinea. L'interlinea stata impostata in modo esagerato per evidenziare l'effetto del bug, in modo tale che il problema è ovvio.
L'HTML necessario per innescare il bug non è altro che semplice testo, con un normale elemento inline rimpiazzato, come un'immagine, all'interno del testo. Il valore di interlinea di 100px è applicato all'elemento body, che dovrebbe separare le righe di testo di almeno 100px.
body {
line-height: 100px;
}
Abbastanza stranamente, questo bug è provocato solo dalla semplice presenza di qualsiasi elemento rimpiazzato:
IMG, INPUT, TEXTAREA, SELECT e OBJECT.
- 3.1 Definizioni: elemento rimpiazzato
- “Un elemento per cui il formattatore CSS conosce solo le dimensioni intrinseche. In HTML, IMG, INPUT, TEXTAREA, SELECT, e OBJECT possono essere esempi di elementi rimpiazzati. Per esempio, il contenuto dell'elemento IMG è spesso rimpiazzato dall'immagine indicata dall'attributo "src". I CSS non definiscono come vengono trovate le dimensioni intrinseche.”
- http://www.w3.org/TR/REC-CSS2/conform.html#replaced-element
Descrizione dettagliata
Un'ulteriore indagine mostra che IE/Win in apparenza crede che vi sia un buon motivo per il suo comportamento. Può sembrare casuale a prima vista, ma non lo è .
Come specificato dai W3C CSS-2.1, la differenza tra 'line-height' e 'font-size' è detta interlinea — metà viene detta semi-interlinea. Un programma utente dovrebbe aggiungere la semi-interlinea sulla parte superiore ed inferiore.
Per esempio, se un 'font-size' di 12 pixel è definito con una 'line-height' di 20 pixel, allora vanno aggiunti 8 pixel (interlinea) di spazio — 4 pixel (semi-interlinea) sulla parte superiore ed inferiore.
Quando IE/Win incontra una riga con un elemento rimpiazzato, fa collassare la semi-interlinea di quella riga con la semi-interlinea della riga precedente e successiva.
C'è una soluzione?
Attualmente non sembra esserci una vera soluzione per questo bug. Il bug in sé è strano e alquanto semplice, per dire il meno.
Una volta che l'elemento viene estratto dal flusso, sia col posizionamento assoluto che col float, il bug non ha luogo. Poichè nessuno di noi ha un'idea di come IE calcoli l'interlinea e considerando il fatto che la situazione non può essere ulteriormente semplificata, sembra che questo bug non possa essere risolto alla fonte. Tuttavia, in certe situazioni si può avere la meglio.
Usare gli hack
Applicandoli ai margini superiore ed inferiore dell'elemento rimpiazzato si può forzare l'interlinea ad essere quasi quella voluta. Sfortunatamente, questa soluzione non è molto universale e si affida ad un paio di semplici requisiti:
- L'altezza dell'elemento rimpiazzato deve essere conosciuta.
- L'altezza degli elementi rimpiazzati dello stesso tipo deve essere quasi uguale per fare uso delle stesse classi CSS.
Applicando il seguente CSS al nostro demo otteniamo un nuovo demo, che rimette ogni cosa a posto.
/* Holly Hack: nascosto da IE5/Mac \*/
* html img {
margin: 45px 0;
vertical-align: middle;
}
* html input {
margin: 39px 0;
vertical-align: middle;
}
/* Holly Hack: finisce di nascondere da IE5/Mac */
I margini superiore ed inferiore simulano la necessaria semi-interlinea per IE/Win.
I loro valori sono calcolati sottraendo l'altezza dell'elemento dalla 'line-height' e dividendo il risultato per due.
La proprietà vertical-align serve per posizionare l'elemento correttamente.
Infine, usiamo l'Holly Hack per impedire a IE/Mac di applicare il CSS.
Alcune note
L'uso di una 'line-height' così grande è raro. Tuttavia, questo bug si può notare quando si usa una dimensione del font più comune, o piccoli elementi rimpiazzati come le emoticon, per esempio.
Nel demo vengono usati i pixel per la 'font-size' e la 'line-height' e la misura delle distanze per una questione di semplicità. Non importa quale tipo di unità venga usato per definire la 'line-height' né se viene definita una dimensione del font.
Conclusione
Un altro bug e per di più strano stavolta. Per fortuna, non rovina terribilmente il layout, ma vi da solo fastidio se siete dei perfezionisti. Avrei voluto concludere con una soluzione vera. Forse un giorno, finché resta un problema.