不透明度切斷文本

Question

我有一個<span>標記，其中包含一些文本。這個標籤基本上被用作「計量器」。我根據一些進度改變它的寬度。

它看起來有點像這樣：

<div> 
    <span id="test">Words</span> 
</div> 

使用CSS：

#test { 
    width: 1%; 
    background-color: red; 
    display: block; 

    opacity: 0.5; 
    filter: alpha(opacity=50); 
    zoom: 1; 
} 

文本溢出<span>之外，這就是我想要的東西。

在IE8中，文字確實不是溢出！問題是filter: alpha(opacity=50);。如果我刪除它，文本正常溢出。

爲什麼不透明度會影響IE8的溢出？

DEMO：http://jsfiddle.net/mxd27/show/（在編輯：http://jsfiddle.net/mxd27/）

Answer 1

嘗試添加一些標記和樣式：

<div class="container"> 
    <div class="progress"></div> 
    <span id="test">Words</span> 
</div> 

.container{ 
    position: relative; 
    display: block; 
    zoom: 1; 
} 

.progress{ 
    width: 10%; 
    background-color: red; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
    zoom: 1; 
} 

#test { 
    position: relative; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
    display:block; 

}