IE8错误？具有高度、位置：绝对和不透明度的 div 无法正确显示
我在 IE8 中遇到 CSS 问题。当我在 #header 中添加不透明度时，.test_div 的完整高度没有显示。但是当我删除不透明度时，.test_div 的完整高度将显示。
这适用于 Chrome 和 Firefox，但不适用于 IE8。我做错了什么吗？
谢谢你！！ :)
代码也在这里： 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;
}
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
最简单的方法是从 #header 内部取出这个 div
并将位置和 z-index 应用于 .test_div
参见 http:// /jsfiddle.net/7aXJD/
easiest way would be to take out this div from inside of #header
and apply position and z-index to .test_div
see http://jsfiddle.net/7aXJD/