CSS:向右浮动 div 会导致容器 div 在 IE 中拉伸(stretch)整个屏幕宽度

Question

我看到一个类似的问题here ，并没有看到答案。我遇到一个问题，其中一个元素在父 div 内向右浮动，这导致 div 在 IE7 中拉伸(stretch)页面的整个宽度。这不会发生在任何其他浏览器(Firefox 和 Chrome)中。我在问题后也贴了图片，以供引用。我使用的 HTML 如下:

<div id="journal" class="journalIE">
    <div class="title_bar">
        <div>
            Testing
        </div>
        <div class="actions"></div>
        <div class="clear"></div>
    </div>
</div>

我为这些标签使用的 CSS 也在下方。我注意到上面提到的其他人的问题和我的问题之间一致的一件事是，两个父 div 都应用了定位(上面的人有绝对，我已经修复)。

#journal
{
    z-index: 1;
}

.journalIE
{
    right: 1px;
    bottom: 18px;
    position: fixed;
}

#journal .title_bar
{
    background: #F3F3F3;
    border: 1px solid #C5D6E8;
    color: #363638;
    font-size: 11pt;
    font-weight: bold;
    height: 20px;
    padding: 4px;
    margin-bottom: 4px;
}

#journal .title_bar .actions
{
    float: right;
}

.clear
{
    clear: both;
}

请注意“ Action ”类向右浮动。如果我拿走那个浮子，我的盒子看起来像this .但是加上 float ，它会拉伸(stretch)整个屏幕，看起来像this。 .这是一个已知的 IE 错误吗，因为它不会在任何其他浏览器中发生，而且它让我发疯。

对于那些想知道的人，我确实在“ Action ”div 中有内容，但已经剥离了所有内容，直到找到根本问题。

如有任何帮助，我们将不胜感激。非常感谢。

Answer 1

你需要一个宽度:*一个 float 框必须有一个明确的宽度(通过'width'属性分配，或者在替换元素的情况下它的固有宽度)。 *

通过:W3C