为什么绝对位置在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但它在6和7中不起作用。

有什么问题？

Answer 1

建议：

如果您只需要保证金，则可以使用此代码，仅使用内部DIV：

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

如果不仅仅是边框，请参阅下面 IE修补程序的解决方案。

非常简单的回答：

您需要设置width和height！

<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>

截图：

小提琴：http://jsbin.com/okibat/1

Answer 2

问题出在IE 6, 7，你不能在相同的声明中使用相反的方向。

例如

.absolute {
    top: 0;
    /* you can't put bottom: 0; here in IE since it the opposite */
}

Answer 3

IE6需要将div嵌套到另一个div中。只有这样你才能绝对定位内部...有时候！如果我将我的div移动到xhtml的某些部分它按预期工作，但在某些地方它是从它周围的div继承的东西（不在其中）。我找不到任何合理的解释，为什么它在某些区域而不是其他区域工作，但我确实意识到无论它是什么，外部div吸收它并允许内部div正确定位。

创建一个类似

的Css类

.bor{ 
border:solid 1px #ccc;
padding:10px; margin:10px;
}

然后将此css添加到内容

div id="wrapper" class="bor">

 <div id="header" class="bor">
    <div id="logo">Logo goes here</div>
    <div id="phone">9876543210</div>
 </div><!-- #header -->

 <div id="mainContent" class="bor">

    <div id="sidebar" class="bor">