IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素,子元素依然能显示bug
多数情况下隐藏(设置display:none)一个元素,无需依次将其内的所有子元素都隐藏。非要这么做,有时会碰到意想不到的bug。如下
1,两个div,d1中包含d2
2,d1,d2都设置了absolute或relative
3,隐藏d1
4,隐藏子元素d2
5,显示d1
?
这时IE6/7 and IE8/9/10(IE7模式)中会发现,子元素d2也能显示出了(别忘了,d2被display:none 了哦)。但IE8/9/10/Firefox5/Safari4/Chrome12中子元素d2仍然是被隐藏的。
重现代码
<!DOCTYPE HTML><HTML><HEAD><meta charset="utf-8" /><title>IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素,子元素依然能显示bug</title></HEAD><BODY><p><button onclick="hidden_d1()">1) 隐藏div[id=d1]</button><button onclick="hidden_d2()">2) 隐藏div[id=d2]</button><button onclick="display_d1()">3) 显示div[id=d1]</button></p><div id="d1" style="position:absolute;width:200px;height:200px;border:1px solid gray;"><div id="d2" style="position:absolute;width:100px;height:100px;background:gold;"></div></div><script>var d1 = document.getElementById('d1');var d2 = document.getElementById('d2');function hidden_d1() {d1.style.display = "none";}function hidden_d2() {d2.style.display = "none";}function display_d1() {d1.style.display = "block";}</script></BODY></HTML>