Internet Explorer - 浮动 div 之间的空间答案

【问题标题】：Internet Explorer - Space Between Floated DivsInternet Explorer - 浮动 div 之间的空间
【发布时间】：2010-10-01 16:08:15
【问题描述】：

我在使用 Internet Explorer 时遇到了演示问题。以下简单的代码块按照我在 Safari、FireFox、Chrome 和 Opera 中的预期呈现。但是，它会导致 IE6 和 IE7 中左右浮动的 DIV 元素之间出现明显的空格。

我的问题是：是否有更正确的方式来实现浮动，以便相同的 CSS 在 IE 和我提到的其他浏览器中工作？如果没有，在 Internet Explorer 中摆脱空间的最佳方法是什么？

谢谢，马特

<style>
.left {
    width:100px;
    float:left;
    border: solid black 1px;
}

.right {
    width: 100px;
    margin-left:100 px;
    border: solid red 1px;
}
</style>

<div class="left">
    a
</div>
<div class="right">
    b
</div>

因为这是一个社区维基。我想我会使用 B 计划下面提出的解决方案发布工作代码。

<style>
        .left {
        width:100px;
        border: solid black 1px;
        float:left;
    }

    .right {
        width:100px;
        border: solid red 1px;
        float:left;
    }
    .clear {
        clear:both;
    }
</style>

<div class="left">
    a
</div>
<div class="right">
    b
</div>
<div class="clear"></div>
c

【问题讨论】：

标签： css internet-explorer html css-float

【解决方案1】：

将它们都向左浮动，在两个 div 之后添加以下内容：

 <div class="clear"></div>

 .clear { clear: both; }

或者使用填充而不是边距。

【讨论】：

这或多或少有效。虽然我只在最后一个元素之后添加了清除 DIV（我想要换行符）

【解决方案2】：

.body {
    padding:0px;
    margin:0px;
}

【讨论】：

【解决方案3】：

这是双边距浮动错误。这里描述得很好：

http://www.positioniseverything.net/explorer/doubled-margin.html

【讨论】：

我不认为这是双倍边距错误。这更像是 3px 边距错误

【解决方案4】：

尝试将 display: inline 添加到浮动 div。我相信这是为浮动元素添加更多边距的 IE 错误。 display: inline 过去为我工作过。希望这会有所帮助。

【讨论】：

浮动元素会自动将显示设置为阻塞；你不能浮动内联元素。