绝对定位的父级和浮动：右子级拉伸

发布于 2024-08-06 15:45:49 字数 1653 浏览 5 评论 0原文

在 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 对话框将行为再现为“真实世界”示例。特征是相同的：

有一个绝对定位的 div（即对话框容器，jQuery-UI 创建它）
1) 中的 div 有 width="auto"
此对话框内有一个元素向右浮动。

在此处查看。同样，IE6、IE7 和 FF2 是唯一有问题的浏览器。

这复制了我的应用程序内的条件。我尝试将问题归结为您在本更新上方看到的内容，但我感觉人们可以使用现实世界的示例来满足我的要求。我希望我已经做到了这一点。

原文

In IE6, IE7 and FF2 the .outer div below is stretching out to the right edge of the document. Here is a complete test case:

<!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>

As I understand position:absolute, the outer div should be removed from the flow of the document and (without a width specified) should take up the minimal amount of space needed to display its contents. However float:right on any child breaks this.

Expected output (IE8, FF3+, Chrome 2+, Safari 4, Opera 9+):

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

Actual output (IE6, IE7, FF2):

Actual output - IE6, IE7, FF2

How do I get the outer div to not stretch? This is only happening in IE6, IE7 and Firefox 2.

Requirements:

.outer cannot have a width set (it must be left as "auto")
.outer must remain absolutely positioned
.floater must remain floated to the right

Update:

I've reproduced the behavior as a "real world" example using jQuery dialog. The characteristics are the same:

There is an absolutely positioned div (i.e. the dialog container, jQuery-UI creates this)
The div from 1) has width="auto"
There is an element inside this dialog that is floated to the right.

See it here. Again, IE6, IE7 and FF2 are the only problematic browsers.

This replicates the conditions inside my application. I tried boiling down the problem to what you see above this Update, but I'm getting the sense that people could use a real-world example where my requirements make sense. I hope I've done this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

胡渣熟男 2024-08-13 15:45:49

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

我知道这不是您想听到的，但我认为您将不得不硬着头皮更改标记或放宽您的样式要求（例如放弃浮动）。

回复收藏 0 原文

爱*していゐ 2024-08-13 15:45:49

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

body {margin:0;padding:0}

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

You need this to stop it overflowing the edge of the page:

body {margin:0;padding:0}

However it will still take up the whole width of the page, it just won't overflow

回复收藏 0 原文

时光匆匆的小流年 2024-08-13 15:45:49

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

回复收藏 0 原文

看海 2024-08-13 15:45:49

.outer { 溢出：隐藏；明确：正确；位置：绝对；边框：1px 纯红色； }
.outer .floater { 浮动：右； }

洛雷姆·伊普苏姆

这非常简单，您只需为每个具有浮动子对象的对象设置 overflow 和 clear 属性即可。

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

<!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。 ;)

.outer { overflow:hidden; clear:right; position:absolute; border:1px solid red; }
.outer .floater { float:right; }

Lorem ipsum

It's really simple, you only must set the overflow and clear properties to every object that has floated childs.

If the parent is also floated, you only need to set your object to float.

<!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>

If got any questions, just ask!

Regards & GL. ;)

回复收藏 0 原文

追星践月 2024-08-13 15:45:49

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

回复收藏 0 原文

韬韬不绝 2024-08-13 15:45:49

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

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

如果不为 .outer div 指定边距，用户代理将使用 width: auto 确定宽度，这看起来会因用户代理而异。

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

如果可以，请指定父 div 的宽度，即使它是 width: 100%。您可能还想放置 * { margin: 0;填充：0； } 在样式表中以避免这些属性中的用户代理差异，特别是当您将 .outer 的宽度指定为 100% 时。

这可能很简单，但您应该能够将语句 .outer .floater 缩短为 .floater。

如果您需要内部浮动体周围的“收缩以适应”效果并需要保持向右浮动，则将 direction: rtl; 添加到 .floater 类中；否则你应该能够使用 float-left;

回复收藏 0 原文

╭⌒浅淡时光〆 2024-08-13 15:45:49

是的，对于绝对定位的元素，宽度未定义（顶部和左侧也是如此）。在这种情况下，有些浏览器会执行弹性表格样式宽度，有些浏览器会执行 100% 宽度，但这取决于浏览器。在这种情况下最好明确。

表格实际上是以跨浏览器方式获得弹性宽度的唯一好方法。只要您记住 cellspacing=0，单单元格表格就和 DIV 一样好。

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

Yeah for absolute positioned elements, width is undefined (as is top and left). Some browsers do elastic table-style width in this case, and some do 100% width, but it's up to the browser. Best to be explicit in this case.

Tables are really the only good way to get elastic width in a cross-browser fashion. A single celled table is just as good as a DIV as long as your remember the cellspacing=0.

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

回复收藏 0 原文

淡墨 2024-08-13 15:45:49

您的 .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>

Your .outer div is empty, therefore we get different results. As soon as you add content to it, atleast in my test it seems to work exactly the same (my test was Chrome 3.0 as the 'working as intended', and IE7 as the broken one).


<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>

Since you mentioned the .outer div has content, try removing the float div from it and it still gets very similar output.

Edit

To reproduce your code without stretching (understand here that you'll have different problems to deal after you have this working equally, like margins/padding/vertical stretch) you can introduce a relative 'wrapper'.


<!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>

回复收藏 0 原文

┼── 2024-08-13 15:45:49

因为我在您的工作示例中看到您正在使用 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 上放置宽度使其在所有其他浏览器中表现良好

Since I see in your working example you're using jquery you could calculate the width of the container first, before floating the floater like so:

<!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>

Putting a width on the outer div makes it behave in all the other browsers

回复收藏 0 原文