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>

请帮助，使这项工作变得非常重要

迎接微米。

Answer 1

哦，等等。尝试：

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

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

ie8定位错误和z-index

1 个答案: