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 CSS菜单功能 改进版
Dec 20 Javascript
JavaScript 仿关机效果的图片层
Dec 26 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 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.MVC的模板标签系统(三)
2006/09/05 PHP
PHP数组相关函数汇总
2015/03/24 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
职工运动会邀请函
2014/01/19 职场文书
教学实习自我评价
2014/01/28 职场文书
音乐教学反思
2014/02/02 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
就业证明函
2015/06/17 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
家长会感言
2015/08/01 职场文书
《雷雨》教学反思
2016/02/20 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
JAVA API 实用类 String详解
2021/10/05 Java/Android