css - Internet Explorer - 浮动 div 之间的空间

Question

我遇到了 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

Answer 1

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

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

 .clear { clear: both; }

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

Answer 2

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

Answer 3

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

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

Answer 4

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