html - 容器 div 额外边距 ie6

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

我认为您应该向#content 添加一些样式:

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

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