绝对定位的父母和浮动:正确的孩子伸展
Roa*_*rth 12 css cross-browser testcase
在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是唯一有问题的浏览器.
这复制了我的应用程序中的条件.我尝试将问题归结为您在此更新上面看到的内容,但我感觉人们可以使用我的需求有意义的真实示例.我希望我已经这样做了.
您需要这样来阻止它溢出页面边缘：
body {margin:0;padding:0}
但是它仍然会占据页面的整个宽度，只是不会溢出