IE8 bug? div with height, position:absolute, and opacity doesn't display correctly
I'm having a CSS problem in IE8. The full height of .test_div is not showing when I add an opacity in #header. But the full height of .test_div will show when I remove the opacity.
This works in Chrome and Firefox, but not in IE8. Am I doing something wrong?
Thank you!! :)
The code is also here开发者_开发百科: http://jsfiddle.net/VPkXu/
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="header">
<div class="test_div">test square</div>
</div>
</body>
</html>
CSS:
#header {
position:absolute;
z-index:10;
height:100px;
width:300px;
background: #888;
/* remove the lines below, the full height of .test_div will be visible (IE8)*/
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
}
.test_div {
background:#CCC;
height:500px;
width:200px;
}
easiest way would be to take out this div from inside of #header
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="header"></div>
<div class="test_div">test square</div>
</body>
</html>
and apply position and z-index to .test_div
.test_div {
z-index: 11;
position:absolute;
}
see http://jsfiddle.net/7aXJD/
加载中,请稍侯......
精彩评论