Question

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

在右侧浮动的<div>旁边有一个左浮动的<div>，然后在另一个左右浮动的另一个左右浮动。它们之间只有24px，但在IE6＆amp; 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;
}

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

我出错的任何想法？

Answer 1

在行之间将其添加到HTML：

<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中出现双重垂直边距的问题”

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

使用空<div>是一种非常常见的方法来“清除”您的花车，尽管此主题中已接受的答案建议使用换行元素<br>。

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

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

因此，请在<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>：

{{1}}

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

2 个答案: