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

多数情况下隐藏(设置display:none)一个元素，无需依次将其内的所有子元素都隐藏。非要这么做，有时会碰到意想不到的bug。如下

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>