Question

<pre><code>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <style>
.back{width: 1000px;height: 1000px;z-index: 1;position: fixed;top: 0px;
left:0px;opacity: 0.5;filter: alpha(opacity=50);background-color: Black;}

#main
{margin: 100px 0 0 100px;width: 500px;position: absolute;background-color: Aqua;}

#div1 {background-color: yellow;z-index:2;position: relative;}
#div2 {background-color: yellowgreen;}
#div3 {position: relative;}
    </style>
</head>
<body>
    <div id="main">
        <div id="div1">
            <div>
                <input value="0000" />
            </div>
        </div>
        <div id="div2">
            <div>
                <input value="1111" />
            </div>
            <div class="back">
            </div>
        </div>
    </div>
    <div id="div3">
        <input value="222" />
    </div>
</body>

大家好，我需要重叠所有div class ='back'除了div2，但IE7也显示div3。它应该看起来像弹出窗口。另一种方法是克隆div2并将其附加到body，但我不喜欢这个想法。

Answer 1

使用相对定位的元素时有z-index bug in IE7。有一个non-JS solution你可以尝试（虽然因为makup而不容易），但也有一个简单的JS解决方案。

您可以在this fiddle中看到一个有效的例子。

jQuery函数是这样的：

if (document.all && !window.opera && window.XMLHttpRequest) {
    $(function() {
        var zIndexNumber = 1000;
        $('div,p,li').each(function() {
            $(this).css('zIndex', zIndexNumber);
            zIndexNumber -= 10;
        });
    });
}

它检查你是否在IE上（你可以使用conditional comments调用脚本），如果是这样，它会循环遍历div，每个循环设置一个较低的z-index。

现在你的输入框在IE7中落后于.back。

IE 7 z-index，在另一个堆栈中重叠div

1 个答案: