IE7下父元素及子元素的隐藏顺序不当带来的display:none出现BUG

前端技术 2023/09/08 CSS
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\">triggle gallery</button>
<button id=\"btn2\" data-rel=\"ad-image\">triggle ad-img</button>
<button id=\"btn3\" data-rel=\"groupTip\">triggle 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>

本文地址：https://www.stayed.cn/item/21358

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案