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 相关文章推荐
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 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防注
2007/01/15 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Vue 短信验证码组件开发详解
2017/02/14 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
python基础教程之匿名函数lambda
2017/01/17 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
python suds访问webservice服务实现
2020/06/26 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
新员工培训个人的自我评价
2013/10/09 职场文书
求职信怎么写范文
2014/05/26 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
特此通知格式
2015/04/27 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript