Question

在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, 应从文件流中删除(无具体指明)should。占用展示其内容所需的最低空间。然而,float:right on any childbreaks this.

预期产出(IE8、FF3+、 Chrome2+、Saf4、OM9+):

“Expected输出

实际产出(IE6, IE7,FF2):

“Actual输出

www.un.org/Depts/DGACM/index_spanish.htm 我怎么能把外围拖到不下? 只是在IE6、IE7和2中发生这种情况。

所需经费:

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

我将行为转作“真实世界”的榜样,使用 j状方言。特征相同:

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.

,见。同样,IE6、IE7和FF2是唯一有问题的浏览器。

这重复了我申请中的条件。我试图将问题降为你在《最新消息》上看到的内容,但我感到,人们可以使用我的要求具有意义的真正世界榜样。我希望我这样做。

Answer 1

对否定的答复表示歉意,但我不认为这样做有办法。对那些年长的浏览器来说,该中心的实施工作完全不正确,就你所描述的情况而言,我不相信,在你给我们留下的限度内,会有任何办法绕过其他特别安全局的财产。作为一种有限的固定办法,你理论上可以就外部四处制定<条码>,以限制其延伸程度......但不幸的是,<条码> 所提到的所有老的浏览器都得到支持。

我知道这并不是你想要听到的话,但我认为,你会再次击退子弹,改变标记或放松你的风格要求(例如放弃浮标)。

Answer 2

你们需要这样做,以阻止该网页的外溢:

body {margin:0;padding:0}

然而,它仍会占用整个页的宽度,它只是赢得了高潮。

Answer 3

float should have a width in this case, and from another point of view you should have top:0;left:0; for the positioned element they should not kept like this. note: this is logic only for the design if you wont the code please ask :)

Answer 4

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

如果母体也浮出,你只需要确定你的标物。

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

Answer 5

如果您将<条码>float:right改为clear:right,你将照例获得所要求的产出,但如果你实际上在浮体之外有内容,则不会按预期行事。

Answer 6

cs2 spec掌握了一些信息,说明用户代理人如何“应当”计算出的宽度,但实际情况不是:。

我肯定建议采用<>限值<> http://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD"rel=“nofollow noreferer” http://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD。

用户使用<代码>width: auto,视用户代理人的不同,确定出宽度。

为什么你不想给父母遗 the?

如果你能够,就为母牛户指明一个宽度,即使它有<条码>:100%<>。您也可将<代码>*{差额:0; paids:0;}放在风格表中,以避免用户单位对这些特性的区别,特别是如果你指明出勤者为100%。

这可能是微不足道的,但你应当能够缩短发言时间。

如果您需要内浮体周围的“缩小到实用”效应,并且需要保持浮质,那么,就应当添加<条码>指示: rtl;至.floater类;否则,你应当能够使用<条码>float-left;。

Answer 7

Yeah的绝对位置要素,width未经界定(如top和left)。一些浏览器在这种情况下确实使用弹性桌式宽度,有些则使用100%的宽度,但只能靠浏览器。最好在此案中明确。

表格确实是以交叉浏览器方式获得弹性体格的唯一良好途径。只要你记住<条码>,单张记号等于0<>。

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

Answer 8

你的out夫是空的,因此我们取得了不同的结果。在我的测试中,一俟你添加内容,就似乎工作完全相同(我的测试是 Chrome3,与预期的工作相同,而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>

既然你提到“主干”具有内容,就试图从中去掉浮游,而且它仍然获得非常相似的产出。

<><>Edit>/strong>

在你平等工作之后,如边际/婚外/直径等,你可以引进一个相对包裹。


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

Answer 9

自2006年以来在你的工作例子中,我看到你在轮舱之前重新使用舱,你可以首先计算集装箱的宽度:

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

挖掘外围区,使其在所有其他浏览器中发生。

Answer 10

我没有IE6、IE7或FF2来测试,因此,我会在这个黑暗中 take。如果我的记忆为我服务,你会再次希望<条码>float:left .outer。这将尽量减少<代码>outer的宽度,同时保持你的内联网<代码>div的比例。

友情链接