Another take on a strange IE6 bug

With every browser, there are bugs. Still, this one for IE6 is pretty annoying I think. But perhaps there is a lesson to be learned here? Nah, I’ll still be using Firefox I think….

The duplicate characters bug, as reported on by PIE, is a very odd bug, and specific to only IE6 on Windows (IE5.5 and lower are unaffected). This example, however, doesn’t have anything to do with comments or elements with display: none declared; the can be done with pure CSS.

Description of the bug

The bug itself duplicates a handful characters of the last float in the row, and in some cases, even makes the last float disappear. It occurs under these circumstances:

1) When you have three or more floats lined up next to each other, and the total of their widths equals 100% of the width of the parent element (percentages or pixels, doesn’t matter).
2) Each of the floats are aligned on the top edge, including the margin of the floats, if any.
3) The parent element doesn’t have any background color, or has a border or padding on the top edge.
4) There isn’t any non-floated content between the floats and the top edge of the parent element.

The example below demonstrates all this. There are three (span)s floated left, the parent element is 600px wide, and the floats are 200px each….. Source: bingbangboom.us

[tags]characters,bug,ie6,parent element[/tags]