html - IE7 和 z-index

Question

我正在建立一个新网站，它将是一个具有不同层次的网站。目前我正在考虑我的页面结构以及它们如何相互交互。

例如，我将使用一个人和一扇门。那个人走进门。你会看到门的一部分在人的前面，另一部分在人的后面。

创建这个。我使用 z-index。因为一切都在移动，所以我想在一个 div 元素中设置门元素，在另一个元素中设置人。

这里是一个代码示例

<div id="container">
        <div id="bg"></div>
        <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 1;'></div>
        <div id="action" style='width:300px; height:300px; position: absolute; top: 20px; left:20px;'>
            <div id='frontofhouse' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 3; top: 20px; left:20px;' ></div>
            <div id="actiontwo" style='width:300px; height:300px; background:#F00; position: absolute; top: 0px; left:0px; z-index:0;'></div>
        </div>
</div>

现在，问题是我前面的人 (#person)。后面的门(#action)。但是一个元素(#frontofhouse)需要在前面。如果你使用 z-index，一切都会在所有浏览器中正常工作。但在 IE7 中不是。

有人知道解决这个问题的办法吗？

谢谢

Answer 1

IE7 的 z-index 有问题，请参阅:IE7 Z-Index issue - Context Menu

但在这种情况下，似乎很难在不乱搞的情况下进行修复。

这是一个在 IE7 和现代浏览器中看起来相同(或足够接近)的版本。

http://jsfiddle.net/thirtydot/ddXEA/

<div id="container" style="position:relative">
    <div id="bg"></div>
    <div id="person" style='width:200px; height:200px; background:#000; position: absolute; z-index: 1;'></div>
    <div id="action" style='width:300px; height:300px;'>
        <div id='frontofhouse' style='width:50px; height:50px; background:#FF0; position: absolute; z-index: 3; top: 30px; left:30px;' ></div>
        <div id="actiontwo" style='width:300px; height:300px; background:#F00; position: absolute; top: 10px; left:10px; z-index:0;'></div>
    </div>
</div>