IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素

如下 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>

　　推荐阅读

　　基于jQuery替换table中的内容并显示进度条的代码

效果图如下：http://jialiren.sinaapp.com/jdt/ Html代码如下：复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>进度条列</ti>>>详细阅读

本文标题：IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素

地址：http://www.17bianji.com/kaifa2/JS/24342.html

1/2 1