html - 为什么绝对位置在 ie 6 和 7 中不起作用

Question

非常简单的 html 代码:

<div style="position: relative; width: 300px; height: 400px; background-color: red">
    <div style="position: absolute; top:2px;bottom:2px;left:2px;right:2px; background-color: gray">
        content
    </div>
</div>

虽然我希望内部 div 将保留外部 div 内的所有位置(2px 边距)。

它在 ff/chrome/ie8 中有效，但在 ie 6 和 7 中无效。

问题是什么？

Answer 1

一个建议:

如果你只需要边距，你可以使用这段代码，只需要单独使用内部 DIV:

<div style="background-color: gray; width: 296px; height: 396px; border: 2px solid red;">
    content
</div>

如果不仅仅是边框问题，请参阅下面的IE Fix解决方案。

非常简单的答案:

您需要设置宽度和高度!

<div style="position: relative; width: 300px; height: 400px; background-color: red">
    <div style="position: absolute; top:2px;bottom:2px;left:2px;right:2px; background-color: gray; width: 296px; height: 396px;">
        content
    </div>
</div>

截图:

fiddle :http://jsbin.com/okibat/1