float/background-color/padding ie6 bug

Question

私のウェブサイトに問題があります。次のコードはie6では正しく表示されません。左のパディングがありません。

<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> 

例のためにすべてのスタイリングをインラインに変更しました。私はこのような他の奇妙なランダムなエラーがあるので、単に "top_right"テキストの右にテキストの整列を設定したくありません。また、背景色を削除しても、この場合はうまく動作します。

どうすればよいですか？すべてのヘルプは、感謝されます、ありがとう！

Answer 1

IE6で戦うときにまず試してみるのは、hasLayoutです。 2番目の<div>にはzoom: 1を使用してください。

Answer 2

解決策の1つは、絶対的な位置決めを行い、次に右側からの距離をパディングと同じにすることです。この問題は、左のテキストが同じ行にある場合にのみ表示されるため、必要に応じてスペーサーを用意する必要があります。

<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幅の値は修正値である必要があります。

<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>