在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>
据了解,位置:绝对,外部div应该从文档的流程中删除,并且(没有指定宽度)应该占用显示其内容所需的最小空间.然而浮动:在任何一个孩子打破这个.
预期输出(IE8,FF3,Chrome 2,Safari 4,Opera 9):
实际输出(IE6,IE7,FF2):
如何让外部的div不伸展?这只是在IE6,IE7和Firefox 2中发生.
要求:
> .outer不能设置宽度(它必须保留为“auto”)
保持绝对的位置
> .floater必须保持浮动在右边
更新:
我已经将行为重现为使用jQuery对话框的“现实世界”示例.特点是一样的:
>有一个绝对定位的div(即对话框容器,jQuery-UI创建这个)
>从1)的div有width =“auto”
>该对话框中有一个元素向右浮动.
See it here.再次,IE6,IE7和FF2是唯一有问题的浏览器.
这将复制我的应用程序中的条件.我试着把这个问题解决到你所看到的这个更新之上,但是我觉得人们可以使用一个现实世界的例子,我的要求是有道理的.我希望我做到了这一点.