The direct cause is nothing more than ordinary HTML comments, such as, <!-- end left column -->, sandwiched between floats that come in sequence. Apparently, the comments are hard for IE to digest when they occupy those positions, resulting in a kind of "screen diarrhea". HTML comments inside the floats do not cause the bug, nor do comments before or after the float series. Only comments residing between floats cause the bug.
The effect seen is that some of the last characters from the last floated element of the series are repeated outside and below that floated element. The first sandwiched comment does nothing unusual, but two comments cause the last two characters in that last float to repeat. Each additional comment makes two more characters join the party. It doesn't matter which pair of floats straddle the comments. In fact the two triggering comments may follow different floats as long as they have floats both before and after them.
Fixes for this issue:
One easy fix is to put a -3px right margin on the last left float. The opposite can be done for layouts with right floats. This seems to be a harmless fix that works every time. Another fix is to give the container element 3px of extra width, so that it is 3px larger than the last float. Sometimes applying hasLayout on the cleared element will stop the text duplication, but not the "Reverse padding bug" in the cleared element.
The another fix is simply remove bug triggering comments (or) use conditional comments in place of normal HTML comments without triggering this bug. It works because conditional comments allow the use of the naught sign (!), so you can specifically tell IE/Win to ignore the CC, while other user agents simply treat the CC as a normal comment as usual. Here's an example:
<!--[if !IE]>Put your commentary in here...<![endif]-->
No comments:
Post a Comment