Explorer 6 e la duplicazione di caratteri

Mi è capitato abbastanza spesso di realizzare pagine html e di vedere, su IE6, uno "strano" comportamento (sarebbe strano andasse tutto bene....):
in alcune circostanze vengono clonate delle porzioni di testo e posizionate di alcune 10ine di px più avanti. Il comportamento è abbastanza fastidioso, perchè in vista codice dal browser, anche visualizzando il codice generato, non si ha alcuna traccia di questo testo duplicato.
Tutto quello che è possibile rilevare è quello che IE6 mostra a video.

Le circostanze nelle quali ho verificato questo bug sono sostanzialmente due:

1 - Presenza di più div con floating (la duplicazione di testo avviene sempre sull'ultimo div)

2 - Presenza di div con la proprietà display:none (in questo caso, oltre alla duplicazione dei caratteri, mi è capitato che la distanza fra il div precedente a quello "nascosto" e quello successivo fosse la stessa che ci sarebbe stata con il div con display:block


Esaminiamo le cause.

Il fattore scatenante pare essere la presenza di commenti nel codice, cioè la cosa più innoqua e stupida del mondo!

Quando IE6 trova più di un commento nidificato fra due div che flottano, duplica una cosa come gli ultimi due caratteri di testo per ogni commento oltre al primo!!!

Un altro fattore che genera la duplicazione è la presenza di elementi, come segnalato sopra con la proprietà display su none.


Vediamo le soluzioni.

1 - Utilizzare i commenti condizionali al posto di quelli tradizionali
Commento tradizionale: < !-- commento -- >
Commento condizionale: < !--[if !IE]-- >Commento< !--[endif]-- >

Che equivale a istruire IE di ignorarli :)

Oltre a questo,

Inserire un right-margin di -3px nell'ultimo div che flotta, se il float è su left, l'opposto se è su right
Una cosa del tipo:


< style="float: left;">< /div >
< style="float: left;">< /div >
< style="float: left; margin-right: -3px;">< /div >


Per approfondire l'argomento,
http://www.positioniseverything.net/explorer/dup-characters.html