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

# absdiv { 位置:绝对的; 左:100 px; 前:100像素; 宽度:80%; 高度:60%; 背景:# 999; ｝ # pctchild { 宽度:60%; 高度:40%; 背景:# CCC; ｝ # reldiv { 位置:相对; 左:20 px; 上图:20 px; 高度:25 px; 宽度:40%; 背景:红色; ｝ < div id = " absdiv " > < div id = " reldiv " > < / div > < div id = " pctchild " > < / div > < / div >

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

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

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

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

# absdiv { 位置:绝对的; 左:100 px; 前:100像素; 宽度:80%; 高度:60%; 背景:# 999; ｝ # pctchild { 宽度:60%; 高度:40%; 背景:# CCC; ｝ # reldiv { 位置:相对; 左:20 px; 上图:20 px; 高度:25 px; 宽度:40%; 背景:红色; ｝ < div id = " absdiv " > < div id = " reldiv " > < / div > < div id = " pctchild " > < / div > < / div >

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

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

在8之前的IE中，它的盒子模型有一个时间方面，最明显的是，它造成了基于百分比的宽度的问题。在这里，默认情况下绝对定位的div没有宽度。它的宽度将根据其内容的像素宽度计算出来，并将在内容渲染后计算。在这一点上，IE遇到并渲染了相对位置的div，它的父div宽度为0，这就是为什么它本身折叠为0。

如果您想要更深入的讨论，以及大量的工作示例，请在这里查看。