Internet Explorer 6 non è ancora morto, e a giudicare dai dati che ricevo dal mio blog in inglese, c'è ancora una non trascurabile percentuale di utenti che ancora oggi continua a navigare con questo browser. Il problema è che in molti paesi Internet Explorer è il browser di maggioranza, e quindi la situazione è piuttosto delicata. IE6 ha un supporto CSS a dir poco disastroso, anche se del tutto schizofrenico: capita infatti che riesca a gestire layout complessi per poi fallire su semplici blocchi di testo. In altre parole, è assolutamente imprevedibile. Tutta la documentazione sui bug di IE6 è condensata in questo articolo, che vi consiglio di leggere (c'è anche la mia traduzione in italiano nella pagina). Diciamo pure che IE6 ci costringe a riempire il nostro codice CSS di hack, trucchi e diavolerie varie non sempre di facile comprensione, e così oggi ho ripreso in mano una mia vecchia idea (magari inutile) e l'ho condensata in un plugin di jQuery, IE6Fix, che risolve alcuni bug di Explorer e che credo possa essere d'aiuto nel debugging.
Il plugin sistema i seguenti bug:
Margine raddoppiato nei float
Quando un float ha un margine che va nella stessa direzione del float stesso, ossia destra o sinistra, tale margine viene raddoppiato. Il plugin risolve questo problema con l'opzione doubledMarginBug impostata su true:
$('#alignleft').ie6Fix({doubledMarginBug: true});
Ecco l'implementazione:
if(options.doubledMarginBug) {
if(element.css('float') !== 'none') {
if(element.css('marginLeft') !== '0' ||
element.css('marginRight') !== '0') {
element.css('display', 'inline');
}
}
}
In realtà il test dovrebbe anche verificare se il flottamento avviene a sinistra o a destra. Questa è una cosa che dovrò aggiungere.
Italic bug
Bug stranissimo questo, presente anche in IE7, e che coinvolge lo stile italic del testo e i box che lo racchiudono. Quando il bug è presente, potreste notare una barra di scorrimento orizzontale non voluta sulla pagina. Il plugin risolve questo problema con l'opzione italicBug impostata su true:
$('p.italic').ie6Fix({italicBug: true});
L'implementazione:
if(options.italicBug) {
if(element.css('fontStyle') == 'italic') {
element.css(
{'overflow': 'visible',
'height': '1%'
});
}
}
Caso tipico è l'elemento address che ha lo stile italic per impostazione predefinita nel foglio di stile del browser.
Gap di 3 pixel nel testo
Questo bug si verifica quando un elemento non flottato ha un margine che supera in larghezza l'elemento flottato, facendo così visualizzare il suo contenuto accanto all'elemento flottato. Il plugin risolve questo problema impostando l'opzione textJogBug su true:
$('#box-content').ie6Fix({textJogBug: true});
L'implementazione:
if(options.textJogBug) {
var floating = null;
if(element.prev().length > 0) {
floating = element.prev();
} else {
floating = element.next();
}
if(floating.css('float') == 'left') {
if(element.css('marginLeft') >= floating.width()) {
element.css('marginLeft', '-3px');
}
} else if(floating.css('float') == 'right') {
if(element.css('marginRight') >= floating.width()) {
element.css('marginRight', '-3px');
}
}
}
Qui il punto è sapere quale elemento è flottato, ma soprattutto individuare con sicurezza la posizione dell'elemento flottato nel DOM. In genere questo bug si verifica quando gli elementi sono adiacenti, ma non sono molto sicuro della mia soluzione in tal senso. Aspetto vostri consigli. :-)
Bug dell'interlinea sulle immagini inline
Prendiamo per esempio le emoticon: inserite in una riga di testo, si collocano normalmente alla stessa altezza della linea di base del testo. Ma non per IE6. Infatti in questo browser tali immagini non solo perdono il loro allineamento verticale, ma fanno anche raddoppiare l'interlinea della riga che le ospita! Il plugin usa l'opzione lineHeightBug in tal senso:
$('img', 'p').ie6Fix({lineHeightBug: true});
L'implementazione:
if(options.lineHeightBug) {
if(element[0].tagName.toLowerCase() != 'img') {
throw new Error('This option works only on inline images.');
return;
}
var height = element.height();
element.css({
'marginTop': height / 3,
'marginBottom': height / 3,
'vertical-align': 'middle'
});
}
In questo caso l'opzione scelta funziona solo sulle immagini, quindi devo sollevare un'eccezione se viene usata su altri elementi. Ma ho dimenticato di verificare se l'immagine è inline. Rimedio subito consigliandovi di aggiungere il seguente test:
if(element.css('display') == 'inline') {
//...
}
Opzioni di utility
Il plugin ha anche le opzioni gainLayout e clearFix che servono rispettivamente ad impostare la proprietà di IE6 hasLayout su true e a contenere i float:
if(options.gainLayout) {
if(element.css('display') == 'block') {
element.css('height', '1%');
} else if(element.css('display') == 'inline') {
element.css('zoom', '1');
}
}
if(options.clearFix) {
element.css({'overflow': 'hidden', 'height': '1%'});
}
Conclusione
Non ho ancora avuto modo di testare il plugin su IE6, quindi non so ancora se il suo funzionamento sia corretto ed efficace. Mi sono basato sulla vecchia versione che avevo testato su Explorer 6 prima che il mio Windows XP cedesse il posto a 7. Non mi fido dei risultati degli emulatori, quindi se potete farlo vi prego di testarlo. Se ci sono errori, bug, anomalie, non esitate a contattarmi o a commentare questo articolo. Grazie a tutti! :-)
Potete visionare il plugin in azione in esempio non disponibile.