Question

我有以下代码：

#div1 {
    position: relative;
    width:800px;
    height:540px;
    top: 50%;
    left: 50%;
    margin-top: -270px;
    margin-left: -400px;
}

#div2 {
    position:absolute;
    left:69px;
    top:223px;
    width:250px;
    height:144px;
}

#div3 {
    width:100%;
    text-align:center;
    position:absolute;
    bottom:0px;
}
<div id="div1">
    <div id="div2">
        Message top.
        <div id="div3">
            Message bottom!
        </div
    </div>
</div>

浏览器窗口中的div1 center o框。它适用于所有浏览器。

div2在div1中放置一个框。它适用于所有浏览器。

div3在div2中显示一条消息，但在底部对齐并居中。它在IE8上并不好，因为它是基于窗口大小的中心div3。 Chrome和Firefox位于div2内部。

如果我为div3添加一个边框，它在所有浏览器上都有div2宽度，但窗口以IE8为中心。

我该如何纠正？

谢谢。

1 个答案:

答案 0 :(得分：0)

Answer 1

这是否适合你？

<div id="div1" style="position: relative; width:800px; height:540px; top: 10%; left: 50%; margin-top: -20px; margin-left: -400px;">
    <div id="div2" style="position:absolute; left:69px; top:223px; width:250px; height:144px; border:1px solid blue">
        <div>Message top!</div>
        <div id="div3" style="width:100%; text-align:center; position:absolute; bottom:0px;border:1px solid red">
            Message bottom!
        </div
    </div>
</div>

（是的，我使用了带内联样式的旧版本）。

注意：

问题不是IE8，它是IE8怪癖模式（又名ie6 / 7）（如果你想让你的页面呈现为IE8并且你不再有问题，请更正你的文档规范。）
问题是，它会将#div3“内联”与您的“消息顶部！”。因此，将该消息封装在块元素中可以解决问题。
我更改了其他一些属性以简化测试（顶部：10％，页边距：-20px，某些边框...）

在Internet Explorer中的另一个div内的中心div

1 个答案: