Question

我在IE8中遇到了CSS问题。当我在#header中添加不透明度时，未显示.test_div的完整高度。但是当我删除不透明度时，将显示.test_div的完整高度。

适用于Chrome和Firefox，但不适用于IE8。我做错了吗？

谢谢!! ：）

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;
}

Answer 1

最简单的方法是从#header

中取出这个div

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <div id="header"></div>
        <div class="test_div">test square</div> 
    </body>
</html>

并将位置和z-index应用于.test_div

.test_div {
    z-index: 11;
    position:absolute;
}

请参阅http://jsfiddle.net/7aXJD/

IE8的bug？ div高度，位置：绝对，不透明度无法正确显示

1 个答案: