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

ttx9n · 发表于 2013-1-19 11:40:14

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">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>

6ox8dn · 发表于 2022-8-21 12:56:59

激动人心，无法言表！

qq303604905 · 发表于 2022-9-14 15:19:20

这个源码还可以

0608fv3 · 发表于 2022-11-10 15:03:53

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

xf9hlg1 · 发表于 2023-1-20 03:02:26

那三门，你们谁寂寞才快乐撒

pwseqn1h · 发表于 2023-9-21 05:26:56

儿童服务绯闻绯闻绯闻

95nd4ba · 发表于 2024-3-28 06:05:13

刷屏刷屏刷屏

leidie123a · 发表于 2024-5-14 03:03:28

谢谢下载来看看

wqpa63gz · 发表于 2024-6-9 19:35:12

啊啊啊啊啊啊啊啊啊啊啊啊啊啊

6q8s6p21 · 发表于 2024-6-26 10:00:14

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

账号		自动登录	找回密码
密码			立即注册

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

相关帖子