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

Posted 2023-03-06

【中文标题】CSS：向右浮动 div 导致容器 div 在 IE 中拉伸整个屏幕宽度

【英文标题】：CSS: Floating div to right causes container div to stretch full width of screen in IE

【发布时间】：2011-01-13 04:28:45

【问题描述】：

我看到了类似的问题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 错误吗，因为它不会在任何其他浏览器中发生，这让我发疯。

对于那些想知道的人，我确实在 'actions' div 中有内容，但已将所有内容剥离到根本问题。

任何帮助将不胜感激。非常感谢。

【参考方案1】：

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

通过：W3C

【讨论】：

所以只有 IE 有这个问题，因为就像我说的 Firefox 和 Chrome 没有拉伸它。我不想给它一个设定的宽度，因为其中的内容会动态变化，我希望宽度能够适当地扩展。

另外，您建议给哪个框指定宽度？我将 float: right 从 .journalIE 类中删除，结果相同。

【参考方案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

【讨论】：

感谢您的快速回答。不幸的是，'actions' div 仍然向右浮动，它仍然拉伸了页面的整个宽度，并且只是将“Testing”放在了最右边。图片在这里：i49.tinypic.com/5ap4bk.jpg

【参考方案3】：

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

.floatr 
float: right;

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

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

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

哦，等等。

我再次查看了代码，我认为您只是在设置类方面遇到了问题。您的“动作”div 错过了动作，请尝试在 CSS 中添加逗号：

#journal .title_bar, .actions

    float: right;

我想有时要弄清楚你必须直接应用 effect 以确保它可以按照你期望的方式运行，然后可能会认为它是某种语法错误，如果它确实有效。呵呵。