IE8中浮动div的问题答案

【问题标题】：Problem with floating divs in IE8IE8中浮动div的问题
【发布时间】：2012-06-06 00:10:28
【问题描述】：

我想让两个街区并排站立。在 Opera、Chrome 和 Firefox 中，我使用我使用的代码得到了预期的结果。但是 IE8 拒绝正确显示它。这是IE8截图：http://ipicture.ru/upload/100405/RCFnQI7yZo.png 和 Chrome 屏幕截图（应该是什么样子）：http://ipicture.ru/upload/100405/4x95HC33zK.png

这是我的 HTML：

<div id="balance-container">
    <div id="balance-info-container">
        <p class="big" style="margin-bottom: 5px;">
            <strong>
                <span style="color: #56666F;">Баланс:</span>
                <span style="color: #E12122;">-2312 руб</span>
            </strong>
        </p>
        <p class="small minor"><strong>Овердрафт 1000 руб. до 1.05.10</strong></p>
    </div>
    <div id="balance-button-container">
        <button id="pay-button" class="green-button">Пополнить счет</button>
    </div>
</div>

还有 CSS：

#balance-container {
    margin-left: auto;
    margin-right: auto;
    width: 390px;
}
#balance-info-container, #balance-button-container {
    float: left;
}
#balance-info-container {
    width: 250px;
}

【问题讨论】：

标签： html css internet-explorer-8 css-float

【解决方案1】：

#balance-container {
    margin: 0 auto 0 auto;
    width: 390px;
}
#balance-info-container {
    width: 250px;
    float:left;
}
#balance-button-container,#pay-button{
    width:140px;
    float:left;
}

这应该会提供您想要的并排容器。

【讨论】：

【解决方案2】：

这很可能与宽度有关。 #balance-info-container 似乎不适合放在右边，所以它滑了下来。
要测试这是否是问题所在，请提供#balance-container width:450px; 并刷新。

如果这确实是问题所在，您可以使用 IE 的开发人员工具来分析每个子容器的宽度，然后将它们缩小或放大到足以容纳它们的父容器。

【讨论】：