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!!
Comment by Sanjeev Sharma — December 7, 2007 @ 3:07 am
Glad you found some use of it, thanks for the feedback.
Comment by Adrian — January 22, 2008 @ 11:40 pm
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?
Comment by Kurt Cruse — July 31, 2008 @ 10:52 am
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.
Comment by Pete Lambert — December 19, 2008 @ 11:21 am
No problem, Pete. Happy holidays.
Comment by Adrian — December 19, 2008 @ 11:30 am
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.
Comment by Adrian — December 19, 2008 @ 11:34 am
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.
Comment by Kenny — April 8, 2009 @ 1:22 pm
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)
Comment by Kenny — April 8, 2009 @ 1:23 pm
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!
Comment by Riceman — April 29, 2009 @ 2:59 am
[...] detailed description of the bug and examples can be found on the page positioniseverything.net and Adrian Pelletier’s page. 0 [...]
Pingback by Fix for Internet Explorer 6 duplicate characters bug | Experience software development with ROPARDO S.R.L. — September 2, 2009 @ 7:04 am
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;
}
Comment by GulDam — September 23, 2009 @ 2:18 pm
[...] Source : http://www.adrianpelletier.com/2007/11/25/decoy-fix-for-ie-duplicate-characters-bug/ [...]
Pingback by Decoy Fix for IE Duplicate Characters Bug — October 5, 2009 @ 4:34 pm
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.
Comment by Jon — October 16, 2009 @ 11:37 pm
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.
Comment by Star Config web design sydney — January 16, 2010 @ 5:06 am
great help for internet explorer
Comment by sana — March 14, 2010 @ 4:35 pm
thanks a lot, i have this bug on ie6 and 7, no other fix works, you just save my day
Comment by walott — August 26, 2010 @ 3:52 am