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 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
vue.js实现双击放大预览功能
Jun 23 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
分享php多功能图片处理类
2016/05/15 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Python入门之三角函数全解【收藏】
2017/11/08 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
python各类经纬度转换的实例代码
2019/08/08 Python
python实现TCP文件传输
2020/03/20 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
大专毕业生求职信
2014/07/05 职场文书
民族精神月活动总结
2014/08/28 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
SQL中的连接查询详解
2022/06/21 SQL Server