IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或re

230 阅读 0 评论 152 点赞

我是靠谱客的博主忧伤花卷，最近开发中收集的这篇文章主要介绍IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或re，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

如下
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> 