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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
jQuery 使用手册(三)
Sep 23 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
vue实现表格合并功能
Dec 01 Vue.js
前端JS获取URL参数的4种方法总结
Apr 05 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
input框中的name和id的区别
2016/11/16 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python星号*与**用法分析
2018/02/02 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Django分组聚合查询实例分享
2020/04/29 Python
学习Python需要哪些工具
2020/09/04 Python
Python: glob匹配文件的操作
2020/12/11 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
自考毕业生自我鉴定
2013/11/04 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
卫生主题班会
2015/08/14 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL