IE8：CSS不透明度滤镜导致字体颜色与背景div的背景颜色相同

Question

我遇到了一个非常奇怪的bug：在一个容器(#container)内有另一个div(#inner)。如果我在IE8中给内部元素设置不透明度(opacity)，则内部div(#inner)的字体颜色将变为外部(#container)元素的背景颜色相同。

有人之前遇到过这种行为吗？

有问题的CSS所在网站：http://beta.sminktanfolyamok.hu（已划掉）。

这些部分的CSS：

div#container {
    width: 940px;
    margin-left: auto;
    margin-right:auto;
    border:1px solid #ccc;
    box-shadow: 3px 3px 10px rgba(10,10,10,0.4);
    -moz-box-shadow: 3px 3px 10px rgba(10,10,10,0.4);
    -khtml-box-shadow: 3px 3px 10px rgba(10,10,10,0.4);
    -webkit-box-shadow: 3px 3px 10px rgba(10,10,10,0.4);
    position:relative;
    padding-left:10px;
    padding-right:10px;
    padding-top:1em;
    background-image:url('images/navigation.jpg');
    background-repeat:no-repeat;
    background-position:center left;
    background-color: #000;
}

div#inner {
    background-color: #999;
    color:#222;
    opacity: 0.7;
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    -webkit-opacity: 0.7;
    filter:alpha(opacity=70);
}

- petermolnar

---

我无意中发现了一个解决方法，明天我会发布它。 - petermolnar

Answer 1

解决方案与ClearType错误相同：我已经添加了

。

 position:relative

涉及到所有相关层面，问题就解决了。

- petermolnar