Throughout the last couple months, I keep working on fixing a corporate site styling, JS execution issue, site performance for which was being implemented quite buggy. Debugging and fixing other people code is always challenging as you need to accommodate other coder’s styling, and try understanding what’s the purpose of writing something you think mean nothing, and avoid hitting some easter-egg issues. But it worths for me the meet such site and picking up such a challenging task as I am actually learning more and much aware something that I may also normally miss-out when I code.
This time come to IE6 – duplicating character bug for float element. Which happen on a customer login page. There is a customerized checkbox and a text label next to it. And a hidden message block appear upon checkbox checked.
<div style=”float:left;”></div>
<input name=”aHiddenValue” value=”data” type=”hidden”/>
<label style=”float:left;”>Some text being duplicated</label>
<fieldset style=”display:none”>
<!– some HTML –>
</fieldset>
But it turns out some Text is being duplicated for the label:
With surfing Google I find the issue is because of IE6 bug, when having some element with float property plus some hidden element nearby them, some text for those floating element ill be duplicated.
Position Is Everything has a thorough write-up on the puzzling behavior, and Adrian Pelletier has a simplier solution for the issue. And why I still write this post as I find that, following Adrian solution cannot immediately resolve my case. Rather adding a display-none span after the element that have duplicate character, I need to further add that bug-fixing-display-none span inside the duplicating text.
<div style=”float:left;”></div>
<input name=”aHiddenValue” value=”data” type=”hidden”/>
<label style=”float:left;”>Some text being duplicated<span class=’ie_fix’></span></label>
<fieldset style=”display:none”>
<!– some HTML –>
</fieldset><style type=”text/css”>
.ie_fix{display:none;}
</style>
Hope people who struggle with this can gain more hint.