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>