313

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 IE7, but not on Firefox or Safari.

If I use pixel width, it works. If the parent is relatively positioned, the percentage width on the child works.

  1. Is there something I'm missing here?
  2. Is there an easy fix for this besides the pixel-based width on the child?
  3. Is there an area of the CSS specification that covers this?
4

7 回答 7

155

父级div需要有一个已定义的width，以像素或百分比为单位。在 Internet Explorer 7 中，父级div需要width为子级定义的百分比div才能正常工作。

于 2008-08-01T12:22:51.593 回答
64

这是一个示例代码。我想这就是你要找的。以下代码在 Firefox 3 (mac) 和 IE7 中显示完全相同。

#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}
<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

于 2008-08-05T05:54:23.310 回答
41

8 之前的 IE 对其盒子模型有一个时间方面的问题，最明显的是会产生基于百分比的宽度问题。在您的情况下，默认情况下绝对定位div的没有宽度。它的宽度将根据其内容的像素宽度计算出来，并在内容渲染后计算。因此，此时，IE 遇到并呈现您相对定位div的父级宽度为 0，因此它本身折叠为 0。

如果您想对此进行更深入的讨论以及大量工作示例，请看这里。

于 2008-09-04T09:02:42.533 回答
39

为什么绝对定位父级中的百分比宽度子级在 IE7 中不起作用？

因为它是 Internet Explorer。

我在这里缺少什么吗？

也就是说，提高你的同事/客户对 IE 不好的认识。

除了孩子的基于像素的宽度之外，还有一个简单的解决方法吗？

使用em单位，因为它们在创建流动布局时更有用，因为您可以将它们用于填充和边距以及字体大小。因此，如果调整大小（这确实是您所需要的），您的空白将与您的文本成比例地增长和缩小。我不认为百分比比 ems 提供更好的控制。没有什么可以阻止您指定百分之一的 em（0.01 em），并且浏览器将按照它认为合适的方式进行解释。

CSS 规范中是否有涵盖此内容的领域？

没有，据我记得em's 和 %'s 仅用于 CSS 1.0 的字体大小。

于 2009-05-13T07:47:40.617 回答
34

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

您是否在 IE8 中尝试过您的代码以查看是否也可以在那里工作？IE8 有一个 Debugger ( F12)，也可以在 IE7 模式下运行。

于 2010-10-22T16:21:10.660 回答
4

div需要有一个定义的宽度：

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
于 2018-09-07T14:53:02.030 回答
3

父<div>标签没有指定任何宽度。将它用于子<div>标签，它可以是百分比或像素，但无论它是什么，它都应该链接到它的适当位置：

<div id="MainDiv" style="width:60%;">
    <div id="Div1">
        ...
    </div>
    <div id="Div2">
        ...
    </div>
    ...
</div>
于 2020-10-06T03:46:15.157 回答