html - IE6 和 IE7 出现双水平边距的问题

Question

我有一个小问题，在 <div> 之间出现双边距的。它在 FF、Opera、Safari 等中运行良好，但在 IE6 和 IE7 中却不行(足够令人惊讶)。

本来应该是左浮动的 <div>在右边漂浮着<div>然后在下面还有另一个左撇子和右撇子。它们之间只有 24px，但在 IE6 和 7 中有 47px。

HTML:

<div id="content">
    <div id="contentwrapper">
        <div class="infobox leftinfo row1">
            <div class="searchForm">
            </div>
        </div>
        <div class="infobox rightinfo row1">
            <div class="searchForm">
            </div>
        </div>
        <div class="infobox leftinfo row2">
            <div class="textstuff">
            </div>
        </div>
        <div class="infobox rightinfo row2">
            <div class="textstuff">
            </div>
        </div>
    </div>
</div>

CSS:

#contentwrapper{
    padding:23px;
}
#content{
    background-image:url(../img/contentbg.jpg);
    border: 1px solid #81b8de;
    -moz-box-shadow: 0 0 8px 5px #80cafe;
    -webkit-box-shadow: 0 0 8px 5px #80cafe;
    box-shadow: 0 0 8px 5px #80cafe;
    behavior: url(/sponster/PIE.htc);
    position:relative;
}
.infobox{
    border: 1px solid #4eed4e;
    background:url(../img/infoboxbg.png) repeat-x;
    height:100%;
    -moz-box-shadow: 0 0 12px -1px #406020;
    -webkit-box-shadow: 0 0 12px -1px #406020;
    box-shadow: 0 0 12px -1px #406020;
    behavior: url(/sponster/PIE.htc);
    position:relative;
}
.leftinfo{
    float:left;
    width:442px;
    margin-bottom:24px;
}
.rightinfo{
    float:right;
    width:442px;
    margin-bottom:24px;
}

注意row1类只是为了让 JavaScript 文件可以确保每个并排的高度 <div>是相同的。这是一个 jQuery 插件:http://www.cssnewbie.com/equalheights-jquery-plugin而且似乎没有任何问题。

有什么地方出错了吗？

Answer 1

将此添加到行之间的 HMTL:

<br class="cl">

它看起来像这样:

<div id="content">
  <div id="contentwrapper">
    <div class="infobox leftinfo row1">
      <div class="searchForm">
      </div>
    </div>
    <div class="infobox rightinfo row1">
      <div class="searchForm">
      </div>
    </div>
    <br class="cl">
    <div class="infobox leftinfo row2">
      <div class="textstuff">
      </div>
    </div>
    <div class="infobox rightinfo row2">
      <div class="textstuff">
      </div>
    </div>
  </div>
</div>

将此添加到 CSS:

.cl{clear:both}