IE7下父元素及子元素的隱藏順序不當帶來的display:none出現(xiàn)BUG
發(fā)布時間：2013-01-19 11:40:14 作者：佚名 
我要評論
我要評論IE7下，先隱藏父元素，后隱藏子元素，再顯示父元素，被隱藏的子元素重疊區(qū)域下面， 存在另一個可見的元素,則該display:none的子元素出現(xiàn)BUG;接下來介紹一下發(fā)生經(jīng)過，感興趣的朋友可以了解下啊，希望本文對你有幫助
IE 7 下， 先隱藏 父元素，后隱藏子元素，再顯示父元素， 被隱藏的子元素 重疊區(qū)域下面， 存在另一個可見的元素， 則該 display:none的子元素出現(xiàn)BUG：
背景和圖片(img元素，不僅僅是圖片背景)仍然顯示， 但文字不顯示，可以觸發(fā)鼠標事件。
<!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>已經(jīng)是最后一張</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出現(xiàn)</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元素，不僅僅是圖片背景)仍然顯示， 但文字不顯示，可以觸發(fā)鼠標事件。
復制代碼
代碼如下:<!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>已經(jīng)是最后一張</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出現(xiàn)</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>
相關(guān)文章
IE/火狐/Chrome操作display:none對象所遇問題解答
display:none在IE、火狐、Chrome等主流瀏覽器中的一些問題想必大家也有碰到過吧，接下來為大家詳細圖文介紹下，感興趣的朋友可以參考下哈希望可以幫助到你2013-03-28css元素隱藏原理及display:none和visibility:hidden
在CSS中，讓元素隱藏指屏幕范圍內(nèi)肉眼不可見的方法很多，只不過有的依然保留空間，而有的卻消失的不留痕跡,接下來本文將詳細介紹下css元素隱藏原理，感興趣的你可不要錯過2013-02-27ie9崩潰現(xiàn)象當js設置tr元素樣式為display:none
在css測試中遇到一個ie9的bug：用js設置tr元素的樣式為display:none 會引起ie崩潰，很是郁悶,于是網(wǎng)上搜羅一下終于找到了解決方法，曬出來與大家分享，感興趣的你可不要錯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
