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>