IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
更新时间：2011年07月31日 22:36:26 作者：
多数情况下隐藏(设置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>
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>
您可能感兴趣的文章:
- jsp 文件上传浏览，支持ie6，ie7，ie8
- JS控制显示隐藏兼容问题(IE6、IE7、IE8)
- js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
- IE6,IE7,IE8下使用Javascript记录光标选中范围（已补全）
- 本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
- JS代码判断IE6,IE7,IE8,IE9的函数代码
- 解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
- ie6,ie7,ie8完美支持position:fixed的终极解决方案
- IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
- IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
相关文章
这篇文章主要介绍了微信小程序封装多张图片上传api代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了javascript中使用连等赋值操作带来的问题的相关资料,需要的朋友可以参考下2015-11-11
javascript的函数、创建对象、封装、属性和方法、继承
从一开始接触到js就感觉好灵活，每个人的写法都不一样，比如一个function就有N种写法2011-03-03
这篇文章主要为大家详细介绍了原生JS实现京东查看商品点击放大，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,下面这篇文章主要给大家介绍了关于利用uniapp开发APP时的调试/安卓打包等的相关资料,需要的朋友可以参考下2022-12-12
原型链是一种关系，实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的,下面这篇文章主要给大家介绍了关于Js继承与原型链的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
javascript消除window.close()的提示窗口
有人问起，怎么去掉js调用window.close()时怎么去掉那可恶的提示，咋一看好像还真不好弄，IE的安全机制好像就不允许通过脚本关闭本页面，但是IE好像可以允许js关闭弹出窗口，那我们是不是可以通过一定的技巧欺骗一下IE，绕过去呢。鼓捣了几下，似乎还真可以做到2015-05-05
我就是想怎么获取 每个层 相对于父级层 是第几个，需要的朋友可以参考下。2011-01-01
本文将对在网页中引用js常会出现的问题进行汇总，并提出解决问题的具体方案，有助于我们更好的学习和使用js，需要的朋友一起来看下吧2016-12-12
这篇文章主要为大家详细介绍了TypeScript的类型注解，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
最新评论