IE7 disappearing float bug

I’ve reported this bug to the IE team as suggested on IEBlog, but I’m posting it here as well. Bear with me, this is a fairly obscure one.

I was trying out the updated version of Internet Explorer 7 Beta 2 preview released yesterday, and noticed a floated image disappearing on one of my web pages. I simplified it down to a minimal testcase and discovered some really weird stuff.

The circumstances seem to be this:

  1. A floated element — DIV and IMG both seem to trigger it.
  2. A block element that ends in italicized text. It could be a P or DIV that ends with text enclosed in I or EM, could be an ADDRESS.
  3. Immediately following that block is another one containing a link.
  4. The link is in the last block element on the page.
  5. CSS rules cause the link to change a block-level property, such as background-color, border, margin or padding.

Then the course of action is this:

  1. Hover over one of the links in that last block element.
  2. Trigger a repaint by scrolling the page, displaying the menu, or switching to another window and back.

The float disappears, and stays invisible until you resize the menu or refresh the page.

I have no idea why the italics cause an issue. I first noticed it with the following markup fragment (simplified) and worked out that removing the address prevented the float from disappearing, but replacing it with <p>Normal <i>Italic</i></p> still triggered the problem.

<address>Address Text</address>
<p><a href="url">Link 1</a> | <a href="url">Link 2</a></p>
</body>

For the record, it was my Comics For Sale page. I scrolled down to the bottom of the page, hovered over the row of W3C links and such, then scrolled back to the top and found that the Firefox and CBLDF banners had vanished.

Update: (April 26) This bug is still present in IE7 Beta 2.

Update: (June 29) This bug is fixed in IE7 Beta 3!

This entry was posted in Web Design. Bookmark the permalink.