float/background-color/padding ie6 bug

Question

Ich habe ein Problem mit meiner Website. Der folgende Code wird in ie6 nicht korrekt angezeigt. Die linke Füllung fehlt.

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;"> 
    <div style="margin: 0 auto 48px; padding: 16px; border: 1px solid #404050; background-color: #a0a0a0;"> 
    <div style="float: right;">top_right</div> 
    <div style="clear: both;"></div> 
    <div>test</div> 
    </div> 
</div> 

Ich habe das ganze Styling für Inline auf Inline umgestellt. Ich möchte nicht einfach den text-align für den "top_right" -Text richtig einstellen, da ich einige andere seltsame zufällige Fehler wie diesen habe. Wenn ich die Hintergrundfarbe entferne, funktioniert es auch (in diesem Fall).

Was soll ich tun? Alle Hilfe wird geschätzt, danke!

Answer 1

Das erste, was man versuchen sollte, wenn man mit IE6 kämpft, ist hasLayout. Verwenden Sie zoom: 1 für die zweite <div>.

Answer 2

Eine Lösung könnte die absolute Positionierung sein, und dann den Abstand von der rechten Seite auf die gleiche wie die Polsterung einstellen. Das einzige Problem dabei ist, dass der Text auf der linken Seite in derselben Zeile steht, also müssten Sie eine Art Abstandhalter dort haben, wenn Sie es in einer eigenen Zeile benötigen.

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;"> 
    <div style="position:relative; margin: 0 auto 48px; padding: 16px; border: 1px solid #404050; background-color: #a0a0a0;"> 
     <div style="position:absolute; right:16px;">top_right</div> 
     <div style="clear: both;"></div> 
     <div>test</div> 
    </div> 
</div> 

Answer 3

IE6 Breite Wert muss ein Fix sein.

<div style="width: 600px; margin: 0 auto; padding: 0 32px; border: 1px solid red;"> 
    <div style="margin: 0 0 48px; width:566px; padding:16px; border: 1px solid #404050; background-color: #a0a0a0;"> 
     <div style="float: right;">top_right</div> 
     <div style="clear:both">test</div> 
    </div> 
</div>