IE7 下父元素及子元素的隐藏顺序带来的 display:none bug

IE 7 下，先隐藏父元素，后隐藏子元素，再显示父元素，被隐藏的子元素重叠区域下面，存在另一个可见的元素，则该 display:none的子元素出现BUG：

背景和图片(img元素，不仅仅是图片背景)仍然显示，但文字不显示，可以触发鼠标事件。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>test display none</title>
<style>
.gallery{
    position: absolute;
    top:100px;
    left:100px;    
    padding:10px;
    overflow: hidden;    
    background:#464646;              
}
.ad-image{
    position: relative;
    width:580px;
    overflow: hidden;
    text-align: center;
    
}

.ad-image img{
    width:100%;
}

.ad-image-groupTip{    
    position: absolute;    
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left: -111px;
    width:222px;
    height: 100px;
    background:none #313131;
    z-index:999;
    font-size:14px;
}
.ad-image-grouplast{
    width:100%;
    height:39px;
    line-height: 39px;    
    border-bottom: 1px solid #000;
    color:#fff;    
}

.ad-image-action{
    height:59px;
    line-height: 59px;
    width:100%;
    border-top: 1px solid #555;
    color:#39c;
}

.ad-image-groupTip .tipLeft{
    float: left;
}
.ad-image-groupTip .tipRight{
    float:right;    
}

.tipClose{
    cursor:pointer;
}
.ad-image-groupTip span{
    margin:auto 12px;
}
.ad-image-action span{
    cursor:pointer;
    vertical-align: middle;
}
.ad-image-action span i{
    display:inline-block;
    vertical-align: text-top;    
    width:20px;
    height:16px;
    *display: inline;
    *zoom:1;
    *vertical-align: middle;
}

.ad-gallery .imgOperate{
    position:absolute; 
    top: 50px; 
    left: 6px;
    height: 30px;
    line-height: 30px;
}
.ad-gallery .imgOperate a{
    color:#39c;
    cursor:pointer;
}
.ad-image-action .review{
    background: url(http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_icons.png) scroll no-repeat 0px 0px;
}

.ad-image-action .goon{
    background: url(http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_icons.png) no-repeat scroll 0px -16px;
}

.testBtns{
    position: relative;
    top:100px;
    left:730px;
    width:100px;    
}

.testBtns button{
    width:100px;
    height: 30px;
    text-align: center;
    border:1px solid #313131;
    margin-bottom: 10px;
}
</style>
</head>
<body>
    <div id="gallery" class="gallery">
        <div id="ad-image" class="ad-image">
            <img  src="http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_7_4c135bd08efea.jpg" />
        </div>
        
        <div id="groupTip" class="ad-image-groupTip" >
            <div class="ad-image-grouplast">
                <span class=tipLeft>已经是最后一张</span> 
                <span class="tipRight tipClose" >×</span>
            </div>
            <div class="ad-image-action">
                <span class="tipLeft">
                    <i class="review"></i>重新浏览
                </span>
                <span class="tipRight">
                        <i class=goon></i>下一个作品
                </span> 
            </div>
        </div>
    </div>
    <div class="testBtns">
        <button id="btn1" data-rel="gallery">toggle gallery</button>
        <button id="btn2" data-rel="ad-image">toggle ad-img</button>
        <button id="btn3" data-rel="groupTip">toggle tip</button>
        <p>IE7先隐藏gallery后隐藏tip，再显示gallery，bug出现</p>
    </div>

    <script>
        document.getElementById("btn1").onclick = 
        document.getElementById("btn2").onclick = 
        document.getElementById("btn3").onclick = function(){
            var relId = this.getAttribute("data-rel");
            var style = document.getElementById(relId).style;
            style.display = (style.display=='none')?'':'none';
        }
        document.getElementById("groupTip").onmouseover = function(){
            alert(this.id);
        }
    </script>
</body>
</html>

相关阅读:
nginx last break等
 Jmeter
nginx location规则
 解决性能瓶颈的一些思路
 spring 一些总结
 idea快捷键
 可读的jvm gc日志时间
 redis 搭建集群
 windows下使用Python来修改文件时间戳
 Python获得文件时间戳
原文地址：https://www.cnblogs.com/ecalf/p/2867227.html