IE7 - Floated Bild verschwindet!

Question

Ok. Hier ist die Situation. Ich style einen Kommentarbereich auf einer meiner Webseiten. Hier ist ein Beispiel-Markup:

<ol class="comments"> 
     <li> 
      <a href="/view/profile/id/2"> 
       <img src="/images/photo-thumb.gif" alt="johndoe" /> 
      </a> 

      <p class="pad-top"><em>written on Sunday 2nd of August 2009 12:12:54 AM by <a href="/view/profile/id/2" class="blue">johndoe</a></em></p> 
      <p class="pad-top pad-bottom">One more comment :D:D:D</p> 
      <div class="clear"></div> 
     </li> 
     <li> 
      <a href="/view/profile/id/2"> 
       <img src="/images/photo-thumb.gif" alt="johndoe" /> 
      </a> 

      <p class="pad-top"><em>written on Thursday 30th of July 2009 02:59:48 AM by <a href="/view/profile/id/2" class="blue">johndoe</a></em></p> 
      <p class="pad-top pad-bottom">Testing comments lalala<br /> 
      <br /> 
      Testing comments lalala<br /> 
      <br /> 
      Testing comments lalala</p> 
      <div class="clear"></div> 

     </li> 
    </ol> 

Und hier ist, wie ich es Styling:

.comments li { 
    margin-top: 1em; 
    padding: 0 1em; 
    background: #3a3a3a; 
} 
.comments img { 
    float: left; 
    margin: 1em 1em 1em 0; 
    border: 1px solid #4f5055; 
} 
.clear { 
    clear: both; 
} 
.pad-top { 
    padding-top: 1em; 
} 
.pad-bottom { 
    padding-bottom: 1em; 
} 

Alles funktioniert gut in allen Browsern außer IE7 wo das schwebte Bild verschwindet. Um zu demonstrieren, hier ist, wie es aussieht, ist in IE8, Firefox etc. (das ist, wie es soll aussehen):

http://richardknop.com/pic2.gif

Und hier ist, wie es in IE7 aussieht:

http://richardknop.com/pic1.gif

Anybody weiß, wie man das repariert? Ich habe bereits versucht, stattdessen den Anker zu schweben und viele andere Tricks, aber ich kann es nicht richtig in IE7 arbeiten.

Answer 1

IE7 hat einige guillotine und BG Farbe Bugs, aber sie sind in der Regel mit der Verwendung: Hover. Ich weiß nicht, ob das in diesem Fall passiert, aber die Lösung ist eine typische: Gib ein Element layout; Spezifisch, geben Sie das Layout .comments li.

.comments li { 
    overflow: auto; 
} 

Answer 2

Nicht sicher über Best Practices, aber ich würde das Innere eines Div-Block setzen, dann schweben Sie diesen Block.

Ich würde auch klar hinzufügen: beide auf die .commments li Abschnitt des CSS.

Answer 3

Das ist für mich gearbeitet hat, wenn ich auf ein ähnliches Problem kam:

img {position: relative;}

Answer 4

Auch dieses Problem gestoßen und fand diese Lösung: http://css-class.com/articles/explorer/guillotine/