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>

由于这是一个社区维基.我以为我会使用Plan 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; }

那或使用填充而不是边距.