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

Question

我遇到了一个小问题，<div> 之间出现了双边距。它在 FF、Opera、Safari 等中运行良好，但在 IE6 和 IE7 中运行良好（令人惊讶）。

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

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}

Answer 2

“双'垂直'边距”在 IE 6 中是一个众所周知的问题，但在 IE7 中不应该是一个问题。 编辑：我的第一个答案是由于对该主题的原始标题的误解而导致不正确，其内容为：“IE6 和 IE7 中出现双 vertical 边距的问题”

应用以下修复后，仔细检查您的 DOCTYPE 并通过 W3C Validator 运行您的代码，以确保其他一切正常。

使用空的<div> 是一种非常常见的“清除”浮点数的方法，尽管此线程中已接受的答案建议使用换行元素<br>。

一个空的<div> 没有高度as demonstrated in this JSFiddle 与类.empty 的红色<div>。请注意，空的红色 <div> 是不可见的，并且在蓝色 <div> 之间不占用任何空间。

<br /> 等其他元素的行高可能会引入其他间距问题as demonstrated in this JSFiddle。请注意如何在每个蓝色 <div> 之间看到一个完整的空行。

因此，在 <div> 行之间添加 <div style="clear:both;"></div>：

<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 style="clear:both;"></div>

    <div class="infobox leftinfo row2">
      <div class="textstuff">
      </div>
    </div>
    <div class="infobox rightinfo row2">
      <div class="textstuff">
      </div>
    </div>
  </div>
</div>