css - ie8 定位和 z-index 错误

Question

我有一个内容框，我想在其中显示 2 个背景图像和内容覆盖。以下代码在 ff、chrome 和 ie9 中工作，但在兼容 ie9 和 ie8 时不工作。

#content {
background-color: #dcdde1;
position: relative;
min-height: 347px;
}

#content_box {
z-index: 3;
position: absolute;
top: 0;
left: 0;
width: 848px;
padding: 20px;
}

#content_background_top {
background-image: url('../img/content_background_top.png');
background-repeat: repeat-x;
position: absolute;
height: 146px;
width: 888px;
top: 0;
left: 0;
z-index: 2;
}

#content_background_bottom {
background-image: url('../img/content_background_bottom.png');
background-repeat: repeat-x;
position: absolute;
height: 215px;
width: 888px;
bottom: 0;
left: 0;
z-index: 1;
}

<div id="content">
    <div id="content_background_top"></div>
    <div id="content_background_bottom"></div>
    <div id="content_box">
        <?php echo $this->Session->flash(); ?>
        <?php echo $this->fetch('content'); ?>
    </div>
</div>

请帮忙，让它工作非常重要

问候M。

Answer 1

等一下。尝试：

#content {
background-color: #dcdde1;
position: relative;
min-height: 347px;
height: 347px;
}

如果这不起作用，您可能需要 clearfix。