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

日期:04-04  浏览:

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

上一篇:javascript代码在ie8里报错 document.getElementById(...) 为空或不是对象的解决方法 原创
下一篇:在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)

网友评论


点击图片更换


查看更多评论
 

推荐文章

·javascript 仿开心网好友印象功能(点击文字弹出印象框)
·js 复制或插入Html的实现方法小结
·由Javascript实现的页面日历
·JS 操作Array数组的方法及属性实例解析
·IE6中使用position导致页面变形的解决方案(js代码)
·Jquery操作下拉框(DropDownList)实现取值赋值
·JavaScript this调用规则说明
·拖动层效果,兼容IE和FF!第1/2页