In questo articolo viene descritto un problema che IE/Win ha con lo stile italic [corsivo, N.d.T.] con alcune (parziali) soluzioni.
In breve, IE/Win ha dei problemi nel calcolare/rispettare la larghezza degli elementi di blocco che contengono del testo in italic. Nella sua forma più semplice il problema può essere visto qui di seguito (per renderlo più evidente sono stati scelti una dimensione di font grande ed una misura espressa in pixel). I due box che seguono hanno una larghezza dichiarata di 200px. Il primo box rispetta tale larghezza, mentre il secondo, che contiene del testo in italic, no. È più largo di circa 9px. (Si noti che non vi è nulla che impedisca alle due parole di essere divise su due righe diverse, e questo accade anche con valori leggermente diversi per la larghezza, i font, ecc.)
lorem ipsum
lorem ipsum
Ecco uno screenshot, nel caso non stiate usando IE/Win, o il vostro IE per puro miracolo non mostri il bug:
L'effetto del problema consiste sempre nel fatto che un elemento di blocco (il contenitore più interno del testo in italic) è più largo del dovuto. Non è necessario che l'elemento abbia una larghezza assegnata, poichè anche gli elementi con 'width: auto' presentano il problema. A seconda della pagina, tale effetto può passare inosservato o distruggere completamente il layout.
Il problema riguarda tutte le versioni di IE5+. Non si conoscono le condizioni esatte che lo provocano, sicchè il problema sembra alquanto casuale. Un elenco di situazioni riscontrate (probabilmente non esaustivo) comprende:
Ecco una pagina separata con testo italic giustificato. La dimensione del font non è fissa, cosicchè potete variarne la dimensione ed osservare gli effetti del bug.
È normale che alcune lettere (come 'j', 'f', specialmente nella loro forma italic) sporgano dal loro box contenitore ( se non è presente padding). Si veda il seguente esempio, o meglio ancora questa pagina separata, in IE/Win e in Mozilla (o Opera.)
jj m m off three six.
jj m m off three six.
Quelli che seguono sono gli screenshot presi in IE6/Win (sinistra),
e in Mozilla (destra). Opera 7 ha la stessa resa di Mozilla.
Sembra che:
Questi effetti di taglio/fuoriuscita
si notano raramente, in quanto di norma il testo è circondato dal padding
che li maschera.
Ma l'effetto di allargamento del box in IE è molto più evidente.
E ricorre anche quando vi è abbastanza padding per mascherare la fuoriuscita del testo
(ossia, il problema non si risolve con la semplice aggiunta del padding).
Guardando gli esempi con differenti versioni di IE/Win (6, 5.5, 5.0),
sembra che il problema sia peggiore in IE5.0: l'allargamento del box appare lo stesso,
ma a volte il testo occupa uno spazio maggiore, ossia giunge vicino
ai limiti del box.
E a volte un bug ancor più strano compare in IE5.0
con il testo in italic giustificato:
una parola che tocca la fine di una riga viene ripetuta in toto all'inizio
della riga successiva!
Per mostrare un'altra manifestazione del problema occorre una pagina contenente un solo paragrafo con larghezza pari a 'auto' o '100%' e del testo in italic. Si apra l'esempio in una nuova finestra e si modifichi lentamente la sua dimensione orizzontale. In IE/Win vedrete una barra di scorrimento orizzontale che va e viene. Tale barra compare quando IE rende il paragrafo più largo del dovuto. Si tratta di pochi pixel e, come detto in precedenza, dipende dal font.
Questo caso mostra anche come il problema abbia un ulteriore elemento di variabilità a seconda della versione di IE (6, 5.x) e, per IE6, della modalità (quirk, standard.)
In un esempio leggermente più complesso vedremo come questo bug si unisce ad altri comportamenti errati di IE. Si supponga di avere:
La marcatura sarà:
<div id="side">some side content</div> <div id="main">some <em>main content</em></div> <div style="clear:both;"></div>
E il CSS:
#side {
float: left;
width: 160px;
background-color: #ccf;
}
#main {
margin-left: 170px;
background-color: #cfc;
}
Da vedersi meglio in una pagina separata.
L'effetto del bug in questo esempio consiste in una barra di scorrimento orizzontale che appare a determinate dimensioni della finestra del browser, come nel secondo esempio, dato che il div principale occupa una spazio maggiore di quello disponibile.
Ora aggiungiamo un quid comunemente usato per evitare molti altri bug di IE, ossia un'altezza per il div principale (il cosiddetto "Holly hack", che assegna una piccola altezza all'elemento. IE espanderà il div fino a racchiudere in toto il suo contenuto, facendo sparire al contempo diversi bug). Nel nostro esempio specifico, questo hack risolverà il bug del 3px jog del testo. Ecco il CSS aggiunto:
/* \*/
* html #main { margin-left: 0; height: 1%; }
* html #side { margin-right: 7px; }
/* */
Da vedersi meglio in una pagina separata.
Ora quando la finestra del browser viene ridimensionata orizzontalmente compare un effetto molto più interessante. Il div verde che dovrebbe trovarsi alla destra del float salta sotto il float e poi di nuovo a lato, a seconda della larghezza della finestra. Now when the browser window is horizontally resized a much more interesting effect appears.
Cosa succede? Solo IE lo sa. Io posso solo dire che:
Ovviamente questo problema può ricorrere in situazioni più complesse e non facili da osservare, ad esempio in pagine con molti elementi, che contengono o sono contenuti dall'elemento che causa il problema. Il fattore essenziale per la sua comparsa sembra essere:
Un aggiustamento dei margini del float o del div principale, o l'aggiunta di elementi contenitori non sembrano evitare il problema.
Ecco un semplice esempio che mostra il problema di IE sopracitato. Abbiamo un'immagine flottata (un'immagine e non un div, per evitare la concomitanza col problema del 3px jog), seguita da un div verde con larghezza fissa e col margine sinistro impostato per spingerlo alla destra dell'immagine, il tutto dentro ad un contenitore. Se la finestra del browser viene ristretta abbastanza da far divenire il contenitore insufficiente a contenere il div verde (col suo margine sinistro), a quel punto il div verde va sotto il float, anche se non vi è più spazio disponibile a lato del float (si muove semplicemente in verticale). Inoltre il contenitore smette di espandersi (o meglio, IE lo allarga per fargli contenere il div verde). I browser più conformi agli standard consentiranno semplicemente al div verde di fuoriuscire dal contenitore, e non lo sposteranno.
Da vedersi meglio in una pagina separata.
Alcuni esempi all'inizio dell'articolo suggeriscono che il problema sembra in qualche modo legato alla non corretta gestione della fuoriuscita del contenuto dal suo contenitore. Infatti la soluzione riguarda l'uso della proprietà 'overflo'.
Un grazie va ad Eric Tribou che (in un messaggio su css-discuss) ha descritto un problema di questo tipo, e il modo con cui lo ha risolto. Eric mi ha anche inviato alcuni utili commenti mentre stava lavorando con questo bus sulle sue pagine di layout.
La soluzione (per IE5.5+) è semplice, e richiede le seguenti due azioni:
La dichiarazione 'overflow' di norma non dovrebbe avere affetto, in quanto 'visible' è il valore predefinito della proprietà 'overflow'. Tuttavia, tale dichiarazione sembra cambiare qualcosa nella resa di IE5.5+, tanto che l'allargamento dell'elemento non ha più luogo.
Dare una dimensione ad un elemento è un modo comune per risolvere molti problemi di IE/Win. Se nessuna dimensione "reale" è appropriata, allora si usi l'Holly hack ( 'height: 1%').
Quelli che seguono sono gli stessi esempi dell'inizio dell'articolo, con la soluzione. Ora tutti i box rispettano la larghezza assegnata.
lorem ipsum
lorem ipsum
jj m m off three six.
jj m m off three six.
Si noti che, come risultato, le lettere che dovrebbero fuoriuscire dai box sono tagliate. Per fortuna si tratta di casi estremamente rari. Di solito vi è del padding intorno al testo e il taglio non avviene.
La soluzione non ha effetto in IE5.0, funziona solo in in IE5.5+. Una soluzione per IE5.0 è:
Questo ripristina la larghezza corretta per il box contenente il testo in italic. Tuttavia (come notato) IE5.0 richiede realmente più spazio, tanto che la soluzione, più frequentemente che in IE5.5+, può tagliare il testo. Bisogna assicurarsi che vi sia abbastanza padding per evitarlo. Sembra che un padding pari a 0.4em sia sempre sufficiente, mentre la metà (0.2em) è sufficiente per IE5.5+.
Ecco gli stessi esempi di prima, ora con 'overflow: hidden'. L'ultimo esempio viene ripetuto con del padding, per evitare che le lettere vengano tagliate e che si ripresenti il bug, solo per IE5.0, della parola ripetuta.
lorem ipsum
jj m m off three six.
jj m m off three six.
Si noti anche che per IE5.5+ sia 'overflow: visible' che 'overflow: hidden' producono lo stesso risultato. Ovviamente il primo è da preferirsi, a meno che il box non contenga solo testo, per prevenire un ulteriore taglio di lettere indesiderato.
Quella che segue è la medesima pagina con "salto" presentata nel terzo esempio, con l'aggiunta della soluzione ('overflow:visible' per IE6, 'overflow:hidden' per IE5.) Non si verifica più il salto del contenuto sotto o a lato del float.
Da vedersi meglio in una pagina separata. Questa è l'intera soluzione, nascosta a tutti i browser diversi da IE/Win:
/* \*/
* html #main {
overflow: hidden;
o\verflow: visible;
width: 100%;
w\idth: auto;
he\ight: 1%;
}
/* */
Nota: l'uso di 'width:100%' in questa pagina si deve ad un'altra "peculiarità" di IE5: non si intende il 100% del box genitore (che non sarebbe appropriato), ma il 100% dello spazio disponibile, ossia lo spazio che rimane alla destra del float (si veda il modello float di IE).
Se si vuole evitare di usare la proprietà 'overflow' per IE5.0, un altro modo per risolvere il problema consiste nell'impostare la larghezza dell'elemento su un valore leggermente inferiore di quello voluto, per assorbire l'allargamento senza distruggere il layout. Per esempio, se la larghezza voluta è pari a 100%, si usi 95%, se invece è di 17em, si usi 16.6em e così via. In altre parole, invece di forzare (con 'overflow: hidden') il box sul valore voluto, si assegni semplicemente una larghezza inferiore al box, in modo che il suo allargamento non distrugga il layout. Non si tratta effettivamente di una soluzione, quanto piuttosto di una scappatoia, che a volte può essere d'aiuto. L'esempio che segue presenta ancora il caso del "salto", ora risolto dando a IE5 'width: 95%' per la seconda colonna.
Da vedersi meglio in una pagina separata.
Vi sono probabilmente altre cose da scoprire su questo bug ed altri metodi per evitarlo.
Ne ho trovato esplicita menzione in alcuni messaggi su css-discuss e nel blog di Simon Willison. Se qualcuno ha altri riscontri, o è in disaccordo su qualcosa che è stato affermato in questo articolo, sarei lieto di sentirlo.
Molte grazie a tutti i membri di css-d (da cui ho imparato molto sui CSS e sui problemi dei browser) ed in particolare a Big John.
Creato nel marzo 2004 da Bruno Fassino.
Ultimo aggiornamento: 17 maggio 2004