12

在 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+）：

预期输出 - IE8、FF3+、Chrome 2+、Safari 4、Opera 9+

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

实际输出 - IE6、IE7、FF2

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

要求：

  • .outer不能有width集合（必须保留为"auto"）
  • .outer必须保持绝对定位
  • .floater必须保持向右浮动

更新：

我已经使用 jQuery 对话框将该行为再现为“真实世界”示例。特点是一样的：

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

在这里看到它。同样，IE6、IE7 和 FF2 是唯一有问题的浏览器。

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

4

10 回答 10

2

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

我知道这不是你想听到的，但我认为你将不得不硬着头皮改变标记或放松你的风格要求（例如放弃浮动）。

于 2009-11-17T14:56:47.443 回答
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;

于 2009-11-15T20:07:35.620 回答
0

在这种情况下，浮动应该有一个宽度，从另一个角度来看，你应该有 top:0;left:0; 对于定位的元素，他们不应该这样保持。注意：如果您不了解代码，这只是设计的逻辑，请询问:)

于 2009-11-08T12:32:59.960 回答
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 上设置宽度使其在所有其他浏览器中都能正常运行

于 2009-11-20T22:31:37.393 回答
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 有内容，请尝试从中删除浮动 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>
于 2009-11-17T12:57:46.050 回答
0

是的，对于绝对定位的元素，宽度是未定义的（就像top和left一样）。在这种情况下，有些浏览器会做弹性表格样式的宽度，有些会做 100% 的宽度，但这取决于浏览器。在这种情况下最好是明确的。

表格确实是以跨浏览器方式获得弹性宽度的唯一好方法。只要您记住cellspacing=0.

<table cellspacing=0 cellpadding=0 style="position:absolute;top:0;right:0">
    <tr><td>Lorem ipsum</td></tr>
</table>
于 2009-11-16T04:52:24.563 回答
0

我没有 IE6、IE7 或 FF2 可供测试，所以我将在黑暗中试一试。如果我没记错的话，你会想继续float:left的.outer。.outer这将在保持内部div比例的同时最小化宽度。

于 2009-11-22T06:12:15.567 回答
0

.outer { 溢出：隐藏；明确：对；位置：绝对；边框：1px 纯红色；} .outer .floater { 浮动：对；} Lorem ipsum 这真的很简单，你只需要为每个有浮动子对象的对象设置溢出和清除属性。

如果父对象也是浮动的，则只需将对象设置为浮动即可。

<!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 { overflow:hidden; clear:right; position:absolute; border:1px solid red; }
  .outer .floater { float:right; }
  .outer .floater .child { float:right; }
  </style>
</head>
<body>
  <div class="outer">
      <div class="floater">Lorem ipsum 
                <span class="child">HI!</span>
      </div>
  </div>
</body>

如果有任何问题，尽管问！

问候和 GL。;)

于 2009-11-09T00:45:47.517 回答
0

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

body {margin:0;padding:0}

但是它仍然会占据页面的整个宽度，它不会溢出

于 2009-10-08T19:59:54.263 回答
0

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

于 2009-11-13T13:04:07.223 回答