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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
Vue项目安装插件并保存
Jan 28 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
js oncontextmenu事件使用详解
2017/03/25 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python虚拟环境完美部署教程
2019/08/06 Python
Python笔试面试题小结
2019/09/07 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
残疾人创业典型事迹
2014/02/01 职场文书
初中学生评语大全
2014/04/24 职场文书
微笑服务演讲稿
2014/05/13 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
国际贸易实训总结
2015/08/03 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers
nginx之内存池的实现
2022/06/28 Servers