html - 具有自动大小的绝对定位元素内的 IE7 浮动块

Question

此示例在 Opera、Chrome、Firefox 和 IE > 7 中看起来相同。在 IE7 中，蓝色块粘在右侧。知道如何在不指定弹出宽度的情况下修复 IE7 中的布局吗？

HTML：

<div id="popup">
    <div class="content">content content content</div>
    <div class="buttons-container">
        <div class="buton"></div>
    </div>
</div>​

CSS：

#popup {
    position: absolute;
    left: 20%;
    top: 10px;
    background: green;
}

.buttons-container {
    line-height: 32px;
    float: right;
    margin-top: 12px;
}

.buton {
    display: block;
    min-width: 60px;
    height: 24px;
    background: blue;
}​