IE8的錯誤？ div與高度，位置：絕對和不透明度不能正確顯示

我在IE8中有一個CSS問題。當我在#header中添加不透明度時，.test_div的完整高度不顯示。但是，當我移除不透明度時，.test_div的全高將顯示。IE8的錯誤？ 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; 
}

來源

2011-05-06 srcastro

看起來不錯，從IE9 IE8兼容性.. – 2011-05-06 01:04:16

請記住，IE9支持CSS透明度，而在IE8你就完蛋了與錯誤的Alpha DXFilter。 – EricLaw 2011-05-07 13:39:00

最簡單的方法是從的#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索引.test_div

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

看到http://jsfiddle.net/7aXJD/

來源

2011-05-06 07:30:09 seler

非常感謝你幫助我:) – srcastro 2011-05-11 18:39:12

IE8的錯誤？ div與高度，位置：絕對和不透明度不能正確顯示

回答

相關問題