CSS IE7 中的奇怪浮动行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/187279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Strange float behaviour in IE7
提问by Kees de Kooter
I want to create a simple box with a header bar containing a title and some tool buttons. I have the following markup:
我想创建一个带有标题栏的简单框，其中包含标题和一些工具按钮。我有以下标记：
<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>
This renders fine in Firefox and Chrome:
这在 Firefox 和 Chrome 中表现良好：
http://www.boplicity.nl/images/firefox.jpg
http://www.boplicity.nl/images/firefox.jpg
However IE7 totally messes up and puts the right floated element to the right of the page:
然而 IE7 完全搞砸了，将正确的浮动元素放在页面的右侧：
http://www.boplicity.nl/images/ie7.jpg
http://www.boplicity.nl/images/ie7.jpg
Can this be fixed?
这可以解决吗？
回答by Marko Dumic
Specify width in outermost div. If that width in your content div means this is the total width of your box, simply add it to the outermost div, and (optionally) remove it from content, like this:
指定最外层 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>
回答by Sam Murray-Sutton
This is just a quick answer, so I hold my hands up if it doesn't quite work. I think Marko's solution will probably work if you just add min-width rather than width. If you are trying to cater for ie6 as well, you may need to use a hack, as min width is not supported by ie6 and it's descendants.
这只是一个快速的答案，所以如果它不起作用，我会举手。我认为如果您只添加最小宽度而不是宽度，Marko 的解决方案可能会起作用。如果您也想满足 ie6，您可能需要使用 hack，因为 ie6 及其后代不支持最小宽度。
So this should work with IE7 and other modern browers. Set the min-width to whatever is appropriate.
所以这应该适用于 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>
回答by Kees de Kooter
I fixed it using jQuery to emulate the behaviour of the non-IE browsers:
我使用 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());
});
}
回答by Toni
Try putting position:relative;to parent-element and to the child-element. It solved the problem for me.
尝试放入position:relative;父元素和子元素。它为我解决了这个问题。
回答by Premanshu
Got to know recently that the right floated elements need to be appended with the divs before the other elements. This is the easiest fix without adding a line of change.
最近知道正确的浮动元素需要在其他元素之前附加 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>
回答by Mote
Make this <div style="background-color:blue; padding: 1px; height: 20px;>the parent of the 2 floating divs also clear:all
使其<div style="background-color:blue; padding: 1px; height: 20px;>成为 2 个浮动 div 的父级clear:all
