Question

给出以下代码：

<!doctype html>
<div style="position:relative;border:1px solid red;width:500px;overflow:visible;">
<div style="height:200px;border:1px solid orange;float:right;">test</div>
</div>
stuff

IE7以外的每个浏览器（以及兼容IE7的IE8）都能正确显示，但在IE7中，父div会自动扩展到浮动子节点的高度。

有没有办法禁用这个“功能”，以便我可以让浮动的div超出父级的结束标记？

Answer 1

您必须阻止外部div获取hasLayout。

某些事情强制hasLayout，而width: <anything other than "auto">就是其中之一。

（您的原始代码：http://jsfiddle.net/T6QsS/）

例如，删除{7}中的width：http://jsfiddle.net/T6QsS/1/

要使用width，您必须将其添加到额外的包装元素：http://jsfiddle.net/T6QsS/2/

Answer 2

一个选项是，如果您知道父级的所需高度，则可以在父div中指定它。例如，在您的情况下：

<!doctype html>
<div style="position:relative;border:1px solid red;width:500px;overflow:visible; height: 0px;">
<div style="height:200px;border:1px solid orange;float:right;">test</div>
</div>
stuff

Here是一个无法测试的小提琴。

Answer 3

您可以使用* CSS黑客攻击IE7。试试这个： http://jsbin.com/ufoqo5/2/edit

IE7父div自动应用清除：两者都为div结束标记

3 个答案: