我的绝对职位div包含几个孩子，其中一个是相对职位div。当我percentage-based width在孩子上使用时div，它会0 width在IE7上崩溃，而在Firefox或Safari上则不会。
如果我使用pixel width，它可以工作。如果父母位置相对，则孩子的百分比宽度有效。
- 我在这里想念什么吗？
- 除了
pixel-based width在孩子身上，还有其他简单的解决方法吗？ - CSS规范中是否有涵盖此方面的内容？
Internet Explorer 7上绝对定位的父级中的宽度子元素百分比
第2977篇《Internet Explorer 7上绝对定位的父级中的宽度子元素百分比》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共6个回答
在div需要具有限定的宽度：
<div id="parent" style="width:230px;">
<div id="child1"></div>
<div id="child2"></div>
</div>
这是一些示例代码。我认为这就是您想要的。在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>IE 8之前的版本在其框模型方面具有时间方面的特征，最明显的问题是基于百分比的宽度产生了问题。在您的情况下，此处的绝对位置div默认没有宽度。其宽度将根据其内容的像素宽度进行计算，并将在呈现内容后进行计算。因此，在IE遇到并渲染相对定位的点时，div其父级的宽度为0，因此为什么它本身会崩溃为0。
如果您想对此进行更深入的讨论以及许多可行的示例，请在此处进行阅读。
为什么绝对定位的父项中的百分比宽度子项在IE7中不起作用？
因为它是Internet Explorer
我在这里想念什么吗？
就是说，要提高您的同事/客户对IE糟糕的认识。
除了基于像素的孩子宽度之外，还有其他简单的解决方法吗？
使用em单位，因为它们在创建液体布局时更有用，因为您可以将它们用于填充和边距以及字体大小。因此，如果调整其大小，则空白区域将与文本成比例地增长和缩小（这确实是您所需要的）。我认为百分比不能比ems更好地控制；您可以使用百分之百的ems（0.01 em）进行指定，浏览器将根据需要进行解释。
CSS规范中是否有涵盖此方面的内容？
没有，据我记得em，CSS和1.0仅用于字体大小。
我认为这与hasLayout在旧版浏览器中实现该属性的方式有关。
您是否在IE8中尝试过代码以查看是否也可以在其中工作？IE8有一个调试器（F12），也可以在IE7模式下运行。
相似问题
问题类别
父级
div需要以width像素或百分比为单位定义。在Internet Explorer 7中，父级div需要width为子级百分比定义一个值div才能正常工作。