Among the countless IE annoyances, the duplicate character bug is one I’ve ran into more than once. position is everythinghas 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 -->
<!-- end wrapper -->

CSS :

.ie_fix {
   display: none;
}

Source : http://www.adrianpelletier.com/2007/11/25/decoy-fix-for-ie-duplicate-characters-bug/

Related Listings:

1. Animated Navigation with CSS & jQuery The simple and elegant roll over effects that I liked....

Do you like this post?

Email: