不透明度会切断文本

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 中的溢出？

演示：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;

}