当前位置：首页 > 资讯 > 技术文档

10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素

时间：2020-12-29 10:54 编辑：来源：阅读：
扫一扫，手机访问

摘要：IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素

如下 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仍然是被隐藏的。重现代码

[u]复制代码[/u] 代码如下:

<!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>

全部评论(0)

上一篇：Java实现合并两个有序序列算法示例
下一篇：深入理解JavaScript中Ajax

资讯排行榜
更多>>