Question

我有一个绝对定位的div包含几个孩子，其中一个是相对定位的div。当我在子div上使用基于百分比的宽度时，它会在Internet Explorer 7上折叠为'0'宽度，但不会在Firefox或Safari上折叠。

如果我使用像素宽度，它可以正常工作。如果父级相对定位，则子级的宽度百分比有效。

我在这里缺少什么东西吗？
除了基于像素的宽度之外，还有一个简单的解决方法子？
CSS规范中是否有一个涵盖此内容的区域？

Answer 1

父div需要定义width，以像素为单位或以百分比形式显示。在Internet Explorer 7中，父div需要已定义的width才能使子百分比div正常工作。

Answer 2

以下是一些示例代码。我想这就是你要找的东西。以下内容在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>

Answer 3

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

如果您想要对此进行更深入的讨论以及大量工作示例，请有一个gander here。

Answer 4

为什么百分比宽度不是孩子绝对定位的父母工作在IE7中？

因为它是Internet Exploder

这里有什么我想念的吗？

也就是说，提高你的同事/客户对IE糟透了的认识。

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

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

CSS规范中是否有一个涵盖此范围的区域？

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

Answer 5

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

您是否在IE8中尝试过代码以查看是否可以在其中运行？ IE8有一个调试器（ F12 ），也可以在IE7模式下运行。

Answer 6

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

<div id="MainDiv" style="width:60%;">
    <div id="Div1">
        ...
    </div>
    <div id="Div2">
        ...
    </div>
    ...
</div>

Answer 7

div必须具有定义的宽度：

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

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

7 个答案: