IE6中奇怪的边距问题答案

【问题标题】：Strange margin problem in IE6IE6中奇怪的边距问题
【发布时间】：2011-08-17 13:14:38
【问题描述】：

HTML：

<div id="outter">
    <div id="left">
        <div id="up">
            This is the up div
        </div>
        <div id="down">
            <h3>This is the down div</h3>
        </div>
    </div>
</div>

CSS：

#outter{
    height: 400px;
    background: white;
    border: 1px solid #bfd2e1;
}
#left{
    float: left;
    margin-right: 0;
    padding: 0;
}
#up{
    width: 355px;
    height: 50px;
    border: 1px solid #ffe59f;
    padding: 12px;
    line-height: 16pt;
    margin: 15px 0 0 15px;
}
#down{
    float: left;
    margin: 15px 0 0 15px;
    width: 381px;
}
#down h3{
    border: 1px solid #bfd2e1;
    background-color: #edf6fe;
    padding: 10px;
}

问题是，在 Chrome/Firefox 中，页面看起来像：

但在 IE6 中：

如您所见，#down 存在边距问题。
小提琴：http://jsfiddle.net/wong2/dTEcs/1/
怎么会这样？

【问题讨论】：

在 IE7 模式下使用 IE8 对我来说效果很好（如果我要再次安装 IE7，我会被绞死）。可能是缓存问题？？
我有 IE7，它看起来还不错 - 缓存也是我的第一个想法。
@Brock Adams 哦，对不起，我刚刚发现我使用的是 IE6...
@g_thom 真的很抱歉，但我刚刚发现我使用的是 IE6
那么你有两个问题:)。抱歉，这不公平，我至少可以看看。

标签： html css margin internet-explorer-6

【解决方案1】：

IE6 doubles margins on floated elements.

将display: inline 添加到您的浮动元素 (#down)。

【讨论】：