IE7 父 div 自动应用 clear:both 到 div 结束标签答案

【问题标题】：IE7 parent div auto-applying clear:both to div closing tagIE7 父 div 自动应用 clear:both 到 div 结束标签
【发布时间】：2014-01-15 01:11:23
【问题描述】：

给出以下代码：

<!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 超出父级的结束标记？

【问题讨论】：

标签： css internet-explorer internet-explorer-7

【解决方案1】：

你必须阻止你的外部div获得hasLayout。

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

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

例如，删除 width 在 IE7 中有效：http://jsfiddle.net/T6QsS/1/

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

【讨论】：

感谢您的回复，但是由于项目的设置方式，div 必须包含宽度（因为它是包装器）并且必须在浮动之后直接关闭，有什么方法可以使用 htc或任何禁用这部分 IE7 的东西？
当然，您可以使用 JavaScript 来解决它（这是 .htc 文件使用的）。 @Briguy37 的答案可能对你有用，在转向 JavaScript 之前看看它是否对你有用。

【解决方案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 是一个需要测试的小提琴。

【讨论】：

【解决方案3】：

您可以使用* CSS hack 来定位 IE7。尝试这个： http://jsbin.com/ufoqo5/2/edit

【讨论】：

谢谢，这似乎可以工作，只要我添加一些额外的包装器以便显示包装器中的有效内容（然后在 *height:0 部分周围放置一个新包装器）。