Question

尝试添加z-index：-1;到一个div类（＆＃34; ie7＆＃34;）定位相对。 div类在另一个div中放置相对位置。它适用于任何其他ie浏览器即7。任何帮助都会被贬低......

<div class="category group closed">

    <div class="group_description">
        <h2>Lorem ipsum</h2>
        <span>Lorem ipsum...</span>
    </div>


    <div class="asset_link">
    <a class="video_link" href="#">
        <img class="avatar" src=""/>

        <div class="text_content">
            <div class="text-inner">
                <h3>Lorem ipsum</h3>
                <span>Lorem ipsum...</span>
            </div>  
            <h4 class="name_title">John Doe</h4>
        </div>
    </a>
    </div>



    <div class="not_available"><h1>This session is not yet available</h1></div>
</div>
</div>

CSS: 

.group_description {
    margin: 30px;
    width: 843px;
    overflow: hidden;
}


.closed {
    background: url('../images/not_available_bg.png');
    z-index:auto;
}
.closed .group_description,
.closed .asset_link {
    position: relative;
    z-index: -1;    
    *filter: alpha(opacity=40);
}

.category.group.closed .not_available {
    display:block!important;
    background: #79c7d4;
    width: 491px;
    height: 110px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: -245px;
}

.category.group.closed .not_available h1 {
    color: #fff!important;
    width: inherit;
    position: absolute;
    margin-top: 40px ;
    text-align: center;
    *margin-left: 35px;  
}

.asset_link {
    margin: 0 auto 30px 30px;
    width: 407px;
    height: 116px;
    float: left;
    overflow: hidden;
}

.asset_link img.avatar {
    width: 110px;
    background: #e7e7e7 url('../images/avatar.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    float: left;
}

.asset_link .text_content {
    background: #f4f4f4;
    margin-left: 2px;
    width: 293px;
    height: 100%;
    float:left;
}

.asset_link .text-inner {
    margin: 15px;
    height: 60px;
    width: 260px;
    word-wrap: break-word;
}

h4.name_title {margin-left: 15px;font-size: 11px!important;}

Answer 1

我很确定这是与嵌套元素有关的常见错误，以及ie7实际处理z-index属性的方式。

这是一篇解释它的文章：

http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

Answer 2

IE 7有一个从未得到修复的z-index反转错误。

如果您使用jQyery，您可以使用它来使其正常工作：

$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});

http://vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

Z-index-1;不会出现在IE 7中

2 个答案: