绝对定位的父母和浮动：正确的孩子伸展

时间：2009-10-08 19:44:28

标签： 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 +）：

Expected output - IE8, FF3+, Chrome 2+, Safari 4, Opera 9+

实际输出（IE6，IE7，FF2）：

Actual output - IE6, IE7, FF2

如何让外部div不能伸展？这只发生在IE6，IE7和Firefox 2中。

要求：

  • .outer无法设置width（必须保留为"auto"）
  • .outer必须保持绝对定位
  • .floater必须保持向右浮动

更新：

我使用jQuery对话框将该行为再现为“真实世界”示例。特征是相同的：

  1. 有一个绝对定位的div（即对话框容器，jQuery-UI创建了这个）
  2. 1）的div有width="auto"
  3. 此对话框中有一个元素浮动到右侧。

    4. See it here。同样，IE6，IE7和FF2是唯一有问题的浏览器。

    这会复制我的应用程序中的条件。我尝试将问题归结为您在此更新上面看到的内容，但我感觉人们可以使用我的需求有意义的真实示例。我希望我已经做到了。

9 个答案:

答案 0 :(得分：2)

对否定答案道歉，但我认为没有办法解决这个问题。对于那些旧的浏览器的CSS实现在你概述的情况下是完全错误的，我不相信有任何方法可以通过你给我们的限制内的其他CSS属性来解决这个问题。作为一个有限的修复，理论上你可以在外部div上设置一个max-width来限制它延伸的程度......但不幸的是，在所提到的所有“旧”浏览器中都不支持max-width反正。

我知道这不是你想要听到的，但我认为你必须咬紧牙关并改变标记或放宽你的风格要求（例如放弃浮动）。

答案 1 :(得分：0)

你需要这个来阻止它溢出页面的边缘：

body {margin:0;padding:0}

然而，它仍将占用页面的整个宽度，它不会溢出

答案 2 :(得分：0)

在这种情况下，

float应该有一个宽度，从另一个角度来看，你应该有top：0; left：0;对于定位元素，他们不应该像这样。 注意：如果你没有代码，这只是设计的逻辑请问：）

答案 3 :(得分：0)

如果您将float:right更改为clear:right，您将在示例中获得请求的输出，但如果您实际上有浮动div之外的内容，它将无法按预期工作。

答案 4 :(得分：0)

css2规范提供了一些有关用户代理“应该”计算宽度的信息，但实际情况不是规范：http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins。

我绝对建议使用严格 DOCTYPE，而不是过渡，http://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD。

如果没有为.outer div指定边距，用户代理将使用width: auto确定宽度，看起来根据用户代理的不同而不同。

为什么不想为父div指定宽度？

如果可以，请指定父div的宽度，即使它是width: 100%。您可能还希望在样式表中放置* { margin: 0; padding: 0; }以避免这些属性中的用户代理差异，尤其是如果为.outer指定宽度为100％。

这可能是微不足道的，但你应该能够将语句.outer .floater简化为.floater。

如果您需要围绕内部浮动器的“缩小到适合”效果并且需要保持向右浮动，则将direction: rtl;添加到.floater类;否则你应该可以使用float-left;

答案 5 :(得分：0)

对于绝对定位元素，宽度未定义（顶部和左侧）。有些浏览器在这种情况下做弹性表格式宽度，有些浏览器做100％宽度，但这取决于浏览器。在这种情况下最好明确。

表格确实是以跨浏览器方式获得弹性宽度的唯一好方法。只要你记得cellspacing=0，单个细胞桌就像DIV一样好。

<table cellspacing=0 cellpadding=0 style="position:absolute;top:0;right:0">
    <tr><td>Lorem ipsum</td></tr>
</table>

答案 6 :(得分：0)

您的.outer div为空，因此我们会得到不同的结果。一旦你向它添加内容，至少在我的测试中它看起来完全一样（我的测试是Chrome 3.0作为'按预期工作'，IE7作为破坏的那个）。


<div class="outer">
  <div class="floater">Lorem ipsum</div>
Lorem ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit 
</div>

由于您提到.outer div有内容，请尝试从中删除float 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>

  body { margin: 0; }
  #outer { position: absolute; border:1px solid red; }
  #wrapper { position: relative; }
  #floater { position: absolute; right:0; border: 1px blue solid;  }

  </style>
</head>
<body>

  <div id="outer">

    <div id="wrapper"> 
        <div id="floater">Lorem ipsumX</div> 
    </div>

    Lorem ipsum dolor sit amet consequetur elitipsum dolor sit amet consequetur elit
  </div>
</body>

答案 7 :(得分：0)

因为我在你的工作示例中看到你正在使用jquery，你可以先计算容器的宽度，然后再浮动浮动器：

<!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>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  <style>
  .outer { position:absolute; border:1px solid red;}
  </style>
</head>
<body>
  <div class="outer">
    <div class="floater">Lorem ipsum</div>
  </div>

  <script type="text/javascript">
    $(".outer")
      .css("width", $(".outer").width());
    $(".floater")
      .css("float", "right");
  </script>

</body>

在外部div上放置一个宽度使其在所有其他浏览器中都有效

答案 8 :(得分：0)

我没有IE6，IE7或FF2进行测试，因此我将在黑暗中对此进行攻击。如果我的记忆能够为我服务，那么您需要float:left .outer。这将最小化.outer的宽度，同时保持内部div的比例。

相关问题
最新问题