Question

我看到了类似的问题here，但没有看到答案。我有一个问题，一个元素在父div中正确浮动，并且它导致div在IE7中拉伸页面的整个宽度。在任何其他浏览器（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;
}

请注意，'actions'类是浮动的。如果我带走那个漂浮物，我的盒子看起来像this。但是添加浮动后，它会拉伸整个屏幕，看起来像this。这是一个已知的IE错误，因为它没有在任何其他浏览器中发生，它让我发疯。

对于那些想知道的人，我确实在“行动”div中有内容，但是已经将所有内容都剥夺了根本问题。

非常感谢任何帮助。非常感谢。

Answer 1

您需要一个宽度：*浮动框必须具有明确的宽度（通过'width'属性指定，或者在替换元素的情况下指定其固有宽度）。 *

via：W3C

Answer 2

这样做

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

然后添加一个Css类

。测试 { 浮动：权利; }

应该这样做，如果它不起作用，请告诉我们。

MNK

Answer 3

我不完全确定你想要什么，因为你没有解释你想用“actions”div做什么，但如果你想让“actions”div在“Testing”div旁边浮动，我只是尝试创建一个单独的.floatr类，或者如果你只将样式直接应用于div，它也会起作用。

.floatr {
float: right;
}

使用.floatr类，将其应用于“actions”div：

<div class="actions floatr"></div>

我不知道为什么，但在我看来，“actions”div忽略了你以这种方式设置的类中的float设置。我个人更喜欢将多个类应用于div，这允许我将该类重用于其他我想要效果的div，但我听说有些浏览器会忽略在第一个之后声明的任何类。哦，我还没有遇到过主流浏览器的问题......

等等哦。

我再次查看了代码，我认为你在如何设置类时遇到了问题。你的“动作”div错过了动作，尝试在CSS中添加一个逗号：

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

我猜有时想要解决一些问题，你必须直接应用效果，以确保它能够按照你期望的方式运行，然后可能认为它是某种语法错误，如果它确实有效。 HEH。

CSS：浮动div到右导致容器div在IE中拉伸整个屏幕宽度

3 个答案: