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 相关文章推荐
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
js验证上传图片的方法
May 12 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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读取和编写XML DOM的实现代码
2011/02/03 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python open读写文件实现脚本
2008/09/06 Python
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
简析Python的闭包和装饰器
2016/02/26 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
销售文员的岗位职责
2013/11/20 职场文书
酒店管理求职信范文
2014/04/06 职场文书
保护环境倡议书500字
2014/05/19 职场文书
护士求职信范文
2014/05/24 职场文书
师德承诺书
2015/01/20 职场文书
行政答辩状范文
2015/05/21 职场文书