0

非常简单的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 中无效。

问题是什么？

4

3 回答 3

1

一条建议：

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

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

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

很简单的答案：

您需要设置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

于 2012-10-12T06:14:07.833 回答
0

问题在于IE 6, 7您不能将相反的方向放在同一个声明中。

例如

.absolute {
    top: 0;
    /* you can't put bottom: 0; here in IE since it the opposite */
}
于 2012-10-12T03:32:00.113 回答
0

IE6 需要将 div 嵌套到另一个 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">
于 2012-10-12T06:32:05.727 回答