7

我在这里看到了一个类似的问题，但没有看到答案。我遇到了一个问题，即元素在父 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;
}

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

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

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

4

3 回答 3

1

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

通过：W3C

于 2010-02-04T17:21:27.637 回答
0

我不完全确定你想要什么，因为你没有解释你想用“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 以确保它可以按照你期望的方式运行，然后可能会认为它是某种语法错误，如果它确实有效。呵呵。

于 2010-02-12T17:31:21.790 回答
0

做这个

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

然后添加一个Css类

.Test { 浮动：对；}

应该这样做，让我们知道它是否不起作用。

MNK

于 2010-02-04T17:17:51.670 回答