为什么 Internet Explorer 7 上绝对定位的父元素的百分比宽度子元素中的宽度会折叠？

Question

我有一个绝对定位的div包含几个孩子，其中一个是一个相对定位的div 。 当我在子div上使用基于percentage-based width时，它在 IE7 上折叠为0 width ，但在 Firefox 或 Safari 上不会。

如果我使用pixel width ，它会起作用。 如果父项相对定位，则子项的百分比宽度有效。

1. 有什么我在这里想念的吗？
2. 除了孩子pixel-based width之外，还有其他简单的解决方法吗？
3. 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。

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

Answer 4

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

因为它是 Internet Explorer。

有什么我在这里想念的吗？

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

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

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

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

没有，据我所知em和 % 在 CSS 1.0 时仅用于字体大小。

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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