As follows:
1, two divs, d1 contains d2
Both d1 and d2 have absolute or relative.
3. Hide d1
4. Hide the child element d2.
5. Display d1
At this time, IE6/7 and IE8/9/10 (IE7 mode) will find that the child element d2 can also be displayed (don't forget, d2 is displayed: none ). However, IE8/9/10/Firefox5/Safari4/Chrome12 neutron element d2 is still hidden.
Code Reproduction
Copy codeThe Code is as follows: <! Doctype html>
<HTML>
<HEAD>
<Meta charset = "UTF-8"/>
<Title> IE6/7 and IE8/9/10 (IE7 mode) Hide the parent and child elements with absolute or relative and then display the parent element, sub-elements still show bugs </title>
</HEAD>
<BODY>
<P>
<Button onclick = "hidden_d1 ()"> 1) Hide div [id = d1] </button>
<Button onclick = "hidden_d2 ()"> 2) Hide div [id = d2] </button>
<Button onclick = "display_d1 ()"> 3) display 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>
