Internet Explorer 7上绝对定位的父级中的百分比宽度子元素

I have an absolutely positioned div containing several children, one of which is a relatively positioned div. When I use a percentage-based width on the child div, it collapses to '0' width on Internet Explorer 7, but not on Firefox or Safari.

如果我使用像素宽度,它可以工作。如果父母相对定位,则子女的百分比宽度起作用。

  1. 我在这里错过了什么吗?
  2. 除了基于像素的宽度之外,还有一个简单的解决方法 子?
  3. 是否有CSS规范的一部分涵盖了这一点?
0
额外 编辑
意见: 45

4 答案

这里是一些示例代码。我认为这是你正在寻找的。以下显示在Firefox 3(mac)和IE7中完全相同。

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"><div class =“snippet-code”>

  #absdiv {
  位置:绝对;
  left:100px;
  top:100px;
  宽度:80%;
  身高:60%;
  背景:#999;
}

#pctchild {
  宽度:60%;
  身高:40%;
  背景:#CCC;
}

#reldiv {
  位置:相对;
  left:20px;
  top:20px;
  身高:25px;
  宽度:40%;
  背景:红色;
} </代码> 
  <div id =“absdiv”>
    <div id =“reldiv”> </div>
    <div id =“pctchild”> </div>
</div> </代码> 
</div></div>

0
额外

8之前的IE对其盒子模型具有时间方面,其中最明显的是产生了基于百分比的宽度的问题。在你的情况下,默认情况下,绝对定位的 div 没有宽度。它的宽度将根据其内容的像素宽度计算出来,并将在内容呈现后计算。所以在IE遇到并呈现相对定位的 div 时,它的父宽度为0,因此为什么它本身会崩溃到0。

如果您希望对此进行更深入的讨论以及大量工作示例,请参阅此处< / A>。

0
额外

为什么没有使用百分比宽度的孩子   在绝对定位的父母工作   在IE7中?

因为它是Internet Exploder

有什么我在这里失踪?

也就是说,要提高你的同事/客户对IE浏览器的吸引力。

除了基于像素的宽度以外,还有一个简单的解决方法吗?

使用 em 单位,因为它们在创建液体布局时更有用,因为它们可以用于填充和边距以及字体大小。因此,如果您的文本被调整大小(这实际上就是您需要的),那么您的文本空间会随着文本的增长而成比例地缩小。我不认为百分比比ems更好地控制;没有什么可以阻止你指定百分之几的ems(0.01 em),并且浏览器会解释它认为合适的。

是否有CSS规范的一部分涵盖了这一点?

没有,据我记得 em 的和%是针对CSS 1.0的字体大小。

0
额外

我认为这与 hasLayout 属性在旧浏览器中实现的方式有关。

你有没有在IE8中试过你的代码,看看它在那里工作? IE8有一个调试器( F12 ),也可以在IE7模式下运行。

0
额外