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


Posted in Javascript onJuly 31, 2011

如下
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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
JavaScript作用域链示例分享
May 27 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
React四级菜单的实现
Apr 08 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 #Javascript
读jQuery之十一 添加事件核心方法
Jul 31 #Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 #Javascript
各浏览器对click方法的支持差异小结
Jul 31 #Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 #Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 #Javascript
javascript中length属性的探索
Jul 31 #Javascript
You might like
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
js使用递归解析xml
2014/12/12 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JavaScript中string对象
2015/06/12 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中的pack和unpack的使用
2018/03/12 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
高中生班主任评语
2014/04/25 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
钱学森电影观后感
2015/06/04 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android