在 IE6、IE7 和 FF2 中,.outer
下面的 div 延伸到文档的右边缘。这是一个完整的测试用例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.outer { position:absolute; border:1px solid red; }
.outer .floater { float:right; }
</style>
</head>
<body>
<div class="outer">
<div class="floater">Lorem ipsum</div>
</div>
</body>
据我了解position:absolute
,应从文档流中删除外部 div,并且(未指定宽度)应占用显示其内容所需的最小空间。然而float:right
,任何孩子都会打破这一点。
预期输出(IE8、FF3+、Chrome 2+、Safari 4、Opera 9+):
实际输出(IE6、IE7、FF2):
如何让外部 div 不拉伸?这只发生在 IE6、IE7 和 Firefox 2 中。
要求:
.outer
不能有width
集合(必须保留为"auto"
).outer
必须保持绝对定位.floater
必须保持向右浮动
更新:
我已经使用 jQuery 对话框将该行为再现为“真实世界”示例。特点是一样的:
- 有一个绝对定位的 div(即对话框容器,jQuery-UI 创建这个)
- 来自 1) 的 div 有
width="auto"
- 此对话框中有一个元素浮动到右侧。
在这里看到它。同样,IE6、IE7 和 FF2 是唯一有问题的浏览器。
这复制了我的应用程序中的条件。我尝试将问题归结为您在此更新上方看到的内容,但我感觉人们可以使用我的要求有意义的真实示例。我希望我已经做到了。