コンテナのdivの余分なマージンIE6

<div id="container"> 
    <div id="content"> 
     <div class="halfLeft"></div> 
     <div class="halfRight"></div> 
    </div> 
</div> 

#container{ width:960px;margin:auto; background-image:url(../img/contentbg.jpg);} 
.halfLeft{font: 1.5em BrushcutRegular; background:url(../img/halfbg.png) no-repeat;margin:12px 0px 12px 12px;float:left;width:468px;height:336px;} 
.halfRight{font: 1.5em BrushcutRegular; background:url(../img/halfbg.png) no-repeat;margin:12px 12px 12px 0px;float:right;width:468px;height:336px;}

が、これは... #containerはIE6で左に余分な12ピクセルを追加しますコンテナのdivの余分なマージンIE6

間違って何任意のアイデア？

出典

2011-07-02 Zaphod Beeblebrox

問題が解決するまでCSSプロパティを削除しようとしましたか？また、直感的ではないにもかかわらず、左と右の両方のdivを左に浮かべる方が一般的には良い方法です。 –

私はあなたが#contentためにいくつかのスタイルを追加すべきだと思います。

出典

2011-07-02 16:30:48 Vladimir

注意：前に#contentに適用したスタイルは分かりませんので、注意してください。 #content {}に 'width'がある場合は、その値を編集する必要があります。たとえば、#content {width：960px}は#content {width：936px}にする必要があります。 – Vladimir

.halfLeftと.halfRightの両方にdisplay: inline;を追加してみてください。

さらに詳細：

padding: 12px; 
overflow: hidden; /* Floating fix for modern browsers */ 
zoom: 1; /* Floating fix for IE */

そして.halfLeftと.halfRightからマージンを削除：The IE5/6 Doubled Float-Margin Bug

出典

2011-07-02 14:55:21

コンテナのdivの余分なマージンIE6

答えて

関連する問題