Among the countless IE annoyances, the duplicate character bug is one I’ve ran into more than once. Position Is Everything has a thorough write-up on the puzzling behavior, which seems to be triggered by HTML comments between floats and sometimes hidden elements. There are a couple different workarounds such as a -3px margin on the last float or using conditional comments in place of regular HTML comments. A colleague and I have found another way to fix this issue which has worked on every case so far and is a slightly easier/cleaner option.
If you place an empty element (it can be a p, span, div, anything) directly after the element which is duplicating characters and set the display to none in the CSS, the problem will disappear. What happens is because the last element within the floats is being hidden, there are no characters for IE to duplicate. For future maintenance, I’ve added a comment within the HTML (as shown in example) so that I’ll know why that extra element is there. I would never recommend placing unused elements within your HTML as it isn’t semantically correct but if you’re looking for a quick fix, this will do the trick.
HTML:
...
<div id="footer">
<p>This element was duplicating characters.</p>
<span class="ie_fix"><!-- do not delete this,
it fixes the IE duplicate characters --></span>
</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>
CSS:
.ie_fix {
display: none;
}
After trying all the possible solutions posted on other website, i stumbled across this post and it really worked!!
Thanks a million!!
Glad you found some use of it, thanks for the feedback.
IE seems to be duplicating the last 8-10 words of a paragraph for me and this hack isn’t working. Got anything else?
I’m still in awe that 25% of our customers are using IE6 in the first place. Will there ever be day when I don’t have to waste money on this stuff?
Oh yeah! In your face, IE!
I’ve just struggled with this bug for a couple of evenings. In my case none of the documented causes for the bug were present (i.e. there were no comments anywhere around the offending floats) but this fix nailed it.
Thanks so much.
And merry christmas.
No problem, Pete. Happy holidays.
Kurt, it’s astonishing there are still so many IE6 users. Fortunately, those numbers are decreasing each year. As far as getting the fix to work, try positioning the empty span in different places below the problem copy to see if that does the trick. If all else fails, the -3px margin fix explained at PIE should work as well. The method above should be viewed as an alternative but either will work.
THANK YOU
After P.I.E.’s solution didn’t fix it, I thought I was done for. Your solution rode in to save the day, and saved me much blood, sweat and tears.
I think it’s also important to note that I saw the Duplicate Characters Bug in IE7, not just IE6. (I think PIE mentioned that it was fixed in IE7, which freaked me out because I thought that I had an unprecedented bug)
i can approve this bug also appears in IE7, just ran into it. what a shit microsoft produces. a known bug that was reported 5 years ago for IE6 is taken over to the new version of this piece of so-called software. maybe because all the beautiful workarounds wouldn’t work anymore if they fixed it. yours worked, by the way. thanks!
The duplicate character bug can be triggered not only for IE6 but also IE7 and IE8. It’s rare, but it does happen.
My duplicate character fix is:
.dupfix {
float:left;
width:1px;
height:0;
line-height:0;
visibility: hidden;
}
I just ran into the bug developing a client’s website – in IE7. It’s just astonishing at how bad IE really is. I wish the general public understood how much of a headache it is for designers and developers. Hell, I wish Microsoft understood that too.
Thank you for letting us know how did u fix it, especially i appricieate you showed us all codes, its much easier to follow, i need this.
great help for internet explorer
thanks a lot, i have this bug on ie6 and 7, no other fix works, you just save my day
I Found that i needed to apply the fix twice
for some reason it was the last word of (6 chars length) and affter the first apply i still had 3 remaining chars.. second apply sorted it
Just add another tag then give display none for that and inside the p tag give & nbsp; i meant nbsp for spave this really works !!!!