Question

<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左侧添加额外的12px ...

任何想法有什么不对？

Answer 1

尝试将display: inline;添加到.halfLeft和.halfRight。

更多信息：The IE5/6 Doubled Float-Margin Bug

Answer 2

我认为你应该为#content添加一些样式：

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

从.halfLeft和.halfRight中移除边距。

容器div额外保证金ie6

2 个答案: