html - float div 在 IE7 中扩展到 100%

Question

我有以下简单布局:

div.main
{
    width: 300px;
    border: 2px solid #98999E;
    overflow: auto;
}
div.main > div
{
    float: right;
    border: 2px solid #FF3700; 
    margin: 2px;
}
div.inner > div
{
     float: right;
}

<div class="main">
    <div class="inner">
        <div>123</div>
        <div>456</div>
    </div>
    <div>999</div>
</div>

在 Chrome 和 Firefox 中，这是按预期呈现的 - 所有内容都在同一行中:

但是，当在 IE7 中测试时(准确地说，实际上是在兼容模式下的 IE8)，主要部分下面的第一个 div 的宽度为 100%，因此第二个 div 被推到它下面:

可以在 here 中找到示例。

如何解决？

(编辑: 事实证明，这在兼容模式下的 IE9 中也发生了)

(编辑 2: 这似乎只发生在 float:right 上，而不发生在 float:left 上)

Answer 1

将 display: inline; 或 display: inline-block; 应用于内部 div。

w3.org - 9.2.2 Inline-level elements and inline boxes