As follows
1, two div,d1 contain D2
2,d1,d2 are set up absolute or relative.
3, Hide D1
4, Hide child elements D2
5, show D1
Then Ie6/7 and IE8/9/10 (IE7 mode) will find that the child element D2 can also be displayed (don't forget, D2 was Display:none OH). But the Ie8/9/10/firefox5/safari4/chrome12 neutron element D2 is still hidden.
Reproduce code
Copy Code code as follows:
<! DOCTYPE html>
<HTML>
<HEAD>
<meta charset= "Utf-8"/>
<title>ie6/7 and IE8/9/10 (IE7 mode) hides the parent element and child elements that have absolute or relative, and then displays the parent element, which still displays the child element bug</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) shows 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>
