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;

}

不透明度会切断文字

1 个答案: