Question

我一直在使用Internet Explorer遇到演示文稿问题。以下简单的代码块可以像Safari，FireFox，Chrome和Opera一样呈现。但是，它会在IE6和IE7中的左右浮动DIV元素之间产生明显的空间。

我的问题是：是否有更强大的正确的方式来实现浮动，以便在IE和我提到的其他浏览器中使用相同的CSS？如果没有，在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

这是双边缘浮动bug。在这里很好地描述：

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

Answer 4

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

Internet Explorer - 浮动Div之间的空间

4 个答案: