IE7中奇怪的浮动行为

我想创建一个带有包含标题和一些工具按钮的标题栏的简单框。我有以下的标记：IE7中奇怪的浮动行为

<div style="float:left"> 
    <div style="background-color:blue; padding: 1px; height: 20px;"> 
     <div style="float: left; background-color:green;">title</div> 
     <div style="float: right; background-color:yellow;">toolbar</div> 
    </div> 
    <div style="clear: both; width: 200px; background-color: red;">content</div> 
</div>

这使得在Firefox罚款和Chrome：

http://www.boplicity.nl/images/firefox.jpg

然而IE7完全打乱了，并把正确的浮动元素到页面的右侧：

http://www.boplicity.nl/images/ie7.jpg

这可以修复吗？

来源

2008-10-09 Kees de Kooter

您可能需要为这个问题提供更多的上下文。你是说内容区域将包含不同大小的表格？ – 2008-10-10 08:32:03

有用的http://css-class.com/articles/explorer/floats/floatandcleartest1.htm – elclanrs 2012-02-10 20:10:31

指定最外层的div宽度。如果你的内容的div宽度意味着这是你的箱子的总宽度，简单地把它添加到最外面的DIV，和（可选）从内容中删除它，就像这样：

<div style="float:left; width: 200px;"> 
    <div style="background-color:blue; padding: 1px; height: 20px;"> 
     <div style="float: left; background-color:green;">title</div> 
     <div style="float: right; background-color:yellow;">toolbar</div> 
    </div> 
    <div style="clear: both; background-color: red;">content</div> 
</div>

来源

2008-10-09 13:46:23

修复了这个问题。然而，内容大小可能不会预先知道。在我的网站上，它通常包含宽度可以增长的表格。 – 2008-10-09 13:53:26

-2

将此<div style="background-color:blue; padding: 1px; height: 20px;> 2周浮动的div的父也clear:all

来源

2008-10-09 13:45:42 Mote

对不起，这并没有帮助。下面是截图：www.boplicity.nl/images/firefox.jpg www.boplicity.nl/images/ie7.jpg – 2008-10-09 13:54:29

这仅仅是一个快速回答，所以如果它不起作用，我会举起手来。我认为如果您只是添加最小宽度而不是宽度，Marko的解决方案可能会起作用。如果你也试图迎合ie6，你可能需要使用黑客，因为最小宽度不被ie6支持，并且它是后代。

所以这应该与IE7和其他现代浏览器。将最小宽度设置为适当的值。

<div style="float:left; min-width: 200px;"> 
    <div style="background-color:blue; padding: 1px; height: 20px;"> 
     <div style="float: left; background-color:green;">title</div> 
     <div style="float: right; background-color:yellow;">toolbar</div> 
    </div> 
    <div style="clear: both; background-color: red;">content</div> 
</div>

来源

2008-10-09 15:37:17

对不起，最小宽度在这种情况下不起作用 – 2008-10-09 16:35:56

我固定它使用jQuery效仿非IE浏览器的行为：

// IE fix for div widths - size header to width of content 
    if (!$.support.cssFloat) { 
     $("div:has(.boxheader) > table").each(function() { 
       $(this).parent().width($(this).width()); 
     }); 
    }

来源

2009-06-24 19:39:19

这是如何回答原来的问题？ – Craig 2010-03-30 16:35:15

它解决了这个问题。建议我不是像其他海报一样静态设置宽度，而是动态设置宽度。 – 2010-03-30 18:36:43

尝试把position:relative;父元素和子元素。它解决了我的问题。

来源

2010-11-13 19:42:27 Toni

最近才知道，正确的浮动元素需要在其他元素之前添加div。这是最简单的修复方法，无需添加任何更改。

<div style="background-color:blue; padding: 1px; height: 20px;"> 
    <div style="float: right; background-color:green;">title</div> 
    <div style="float: left; background-color:yellow;">toolbar</div> 
</div>

来源

2012-01-06 15:19:25 Premanshu

IE7中奇怪的浮动行为

回答

相关问题