IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2018-10-12 13:54
941 查看
如下
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仍然是被隐藏的。
重现代码
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问题
相关文章推荐
- IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素,子元素依然能显示bug
- IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
- IE 8 Beta 2 初体验 - 隐藏了的"IE7模式"
- 【IE bug 解决办法】IE下(IE10及以下)当元素为absolute定位时,点击事件失效的解决办法 分类: ie ie bug ie absolute click 2015-06-26 11:05 21人阅读 评论(0) 收藏
- 【IE bug 解决办法】IE下(IE10及以下)当元素为absolute定位时,点击事件失效的解决办法
- ie10中元素超出父元素的宽度时不能自动隐藏
- CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
- 各种IE兼容模式代码,IE6,IE7,IE8,IE9,IE10
- CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
- IE6/7 and IE8/9(怪异模式)中form元素默认样式导致的bug
- JQuery采用CSS实现DOM元素的显示和隐藏
- js单击显示元素,点击元素本身以外隐藏元素
- jquery隐藏显示元素
- Bootstrap 控制移动端和网页端的元素隐藏和显示
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- jQuery判断元素是否显示与隐藏
- css元素hover時控制另一个元素的显示隐藏
- jquery控制css的display(控制元素的显示与隐藏)
- 利用顺序表的操作,实现以下函数: 1)从顺序表中删除具有最小值的元素并由函数返回被删除元素的值。空出的位置由最后一个元素填补,若顺序表为空则显示出错信息并退出运行。
- IE7下td中元素使用margin负值,溢出部分被隐藏