IE7下父元素及子元素的隐藏顺序不当带来的display:none出现BUG
发布时间：2013-01-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>
背景和图片(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>
相关文章
IE/火狐/Chrome操作display:none对象所遇问题解答
display:none在IE、火狐、Chrome等主流浏览器中的一些问题想必大家也有碰到过吧，接下来为大家详细图文介绍下，感兴趣的朋友可以参考下哈希望可以帮助到你2013-03-28css元素隐藏原理及display:none和visibility:hidden
在CSS中，让元素隐藏指屏幕范围内肉眼不可见的方法很多，只不过有的依然保留空间，而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理，感兴趣的你可不要错过2013-02-27ie9崩溃现象当js设置tr元素样式为display:none
在css测试中遇到一个ie9的bug：用js设置tr元素的样式为display:none 会引起ie崩溃，很是郁闷,于是网上搜罗一下终于找到了解决方法，晒出来与大家分享，感兴趣的你可不要错2013-02-20display:none和visibility:hidden的差别比较与演示代码
display:none和visibility:hidden的差别:visibility:hidden隐藏，但在浏览时保留位置；而CSS display:none视为不存在，且不加载,感兴趣的朋友可以研究下2012-12-30
如何通过 display:olck/none 完成一个菜单栏
这篇文章主要介绍了如何通过 display:olck/none 完成一个菜单栏,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-18
最新评论