Css 绝对定位父对象和浮动：右子对象拉伸_Css_Cross Browser_Testcase

Css 绝对定位父对象和浮动：右子对象拉伸

css

Css 绝对定位父对象和浮动：右子对象拉伸,css,cross-browser,testcase,Css,Cross Browser,Testcase,在IE6、IE7和FF2中，下面的.outerdiv延伸到文档的右边缘。下面是一个完整的测试用例： <!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> &l

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


.outer{位置：绝对；边框：1px纯红色；}
.outer.float{float:right；}
乱数假文

据我所知，position:absolute，外部div应该从文档流中删除，并且（没有指定宽度）应该占用显示其内容所需的最小空间。但是，任何子项上的

float:right

都会破坏此功能

预期输出（IE8、FF3+、Chrome 2+、Safari 4、Opera 9+）：

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

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

要求：

.outer

不能设置

宽度（必须保留为“自动”
）


.outer
必须保持绝对位置
.flooter
必须保持向右浮动



更新：
我使用jQuery对话框将该行为复制为一个“真实世界”的示例。这些特点是相同的：
有一个绝对定位的div（即jqueryui创建的对话框容器）
1）中的div具有width=“auto”
此对话框中有一个元素向右浮动
。同样，IE6、IE7和FF2是唯一有问题的浏览器
这将复制应用程序中的条件。我试着把问题归结到你在这个更新上面看到的东西，但是我感觉人们可以使用一个真实世界的例子，在那里我的需求是有意义的。我希望我已经这样做了。
您需要这个来阻止它溢出页面边缘：
body {margin:0;padding:0}

但是，它仍然会占据整个页面的宽度，不会溢出。在这种情况下，float应该有一个宽度，从另一个角度看，应该有top:0；左：0；对于定位元素，它们不应保持这样。
注意：如果您不喜欢代码，这只是设计的逻辑，请询问：）
.outer{溢出：隐藏；清除：右；位置：绝对；边框：1px纯红色；}
.outer.float{float:right；}
乱数假文
这真的很简单，您只需为每个已浮动child的对象设置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>


.outer{溢出：隐藏；清除：右；位置：绝对；边框：1px纯红色；}
.outer.float{float:right；}
.outer.float.child{float:right；}
乱数假文
你好

如果有任何问题，就问吧
问候（德国劳埃德）
 如果您将float:right
更改为clear:right
，您将在示例中获得请求的输出，但如果您的内容实际位于floter div之外，它将无法按预期工作。
css2规范包含一些关于用户代理“应该”如何计算宽度的信息，但实际情况并非规范：
我绝对建议使用严格的DOCTYPE，而不是过渡类型
在不为.outer div指定边距的情况下，用户代理将使用width:auto
来确定宽度，这似乎取决于用户代理
为什么不想为父div指定宽度
如果可以，为父div指定一个宽度，即使它是width:100%
。您可能还希望在样式表中放置*{margin:0；padding:0；}
，以避免这些属性中的用户代理差异，特别是当您将.outer的宽度指定为100%时
这可能很琐碎，但您应该能够将语句.outer.floater缩短为just.floater
如果需要内部浮动框周围的“收缩以适应”效果，并且需要保持浮动右侧，则添加direction:rtl到.flotter类；否则，您应该能够使用float left
是的，对于绝对定位元素，宽度未定义（如顶部和左侧）。在这种情况下，有些浏览器使用弹性表格样式宽度，有些浏览器使用100%宽度，但这取决于浏览器。在这种情况下，最好是明确的
表格确实是以跨浏览器方式获得弹性宽度的唯一好方法。只要记住cellspacing=0
，单单元格表格就和DIV一样好
<table cellspacing=0 cellpadding=0 style="position:absolute;top:0;right:0">
    <tr><td>Lorem ipsum</td></tr>
</table>


乱数假文
您的.outer div为空，因此我们得到不同的结果。一旦你添加了内容，至少在我的测试中它看起来是完全一样的（我的测试是Chrome3.0作为“按预期工作”，IE7作为坏的）

乱数假文
如果你是一个聪明的人，你可以说是一个聪明的人，你可以说是一个聪明的人，你可以说是一个聪明的人，你可以说是一个聪明的人，你可以说是一个聪明的人，你可以说是一个聪明的人

既然您提到了.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>


正文{页边距：0；}
#外部{位置：绝对；边框：1px纯红色；}
#包装器{位置：相对；}
#浮点数{位置：绝对；右侧：0；边框：1px蓝色实心；}
Lorem ipsumX
我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是：我的意思是

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

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