De dubbele tekens bug in IE


Het zal ja waarschijnlijk al eens zijn opgevallen bij het ontwerpen, van een layout met meerdere float’s, dat in Internet Explorer de laatste link en/of tekst nog eens herhaald wordt.

En daar er geen enkel element daarvoor verantwoordelijk is, is deze bug een echte brain-teaser.

Een voorbeeld welke je met IE moet bekijken, daarna eens met FireFox of Opera waar je zal zien hoe het eigenlijk zou moeten zijn.

Het probleem

De echte oorzaak van dit fenomeen zijn comments, ja inderdaad kleine comments die je in je code zet als aanwijzingen. Maak je geen gebruik van comments zal je dit fenomeen toch nog kunnen tegenkomen daar een CSS bepaling display: none; op eender welk element vooraf de Duplicate Character bug in IE6 zal kunnen veroorzaken.

Comments

Dus comments, wat is dat vraag je:

<div style="float: left;">
<div style="float: left;"></div>
<!-- dit is een HTML comment -->
<div style="float: left;"></div>
</div>

Als je zulke tussen de ge-floatte elementen plaats dat begint de miserie, niet één maar pas vanaf 2 comments zullen de bug activeren, en wel zo dat voor elke comment één letter zal worden herhaald onder de laatste float.

Dus als je 50 comments plaatst, zullen er 49 tekens herhaald worden. Goed hé ?

De oplossing

Natuurlijk is er een oplossing, er zijn er zelf 3:

  1. Een extra margin-right: -3px; geven aan het laatste gefloatte element, als je natuurlijk alles rechts uitlijnt dan is het andersom.
  2. Je geeft de omvattende container een extra 3px breedte, opgelet: dit werkt niet altijd.
  3. Je haalt het teveel aan comments weg, ahja

Een voorbeeld van de oplossing met de eerste mogelijkheid welke je met IE6 moet bekijken.

Een voorbeeld van de oplossing met de laatste oplossing, welke je met IE6 moet bekijken.