CSS Opacity在IE11中不起作用

Question

我试图用这个CSS 制作background-color一个tr不透明的:

.faded{
    background-color: red;
    height: 100px;
    opacity: 0.4;
    filter: alpha(opacity=50);
}

这是我的测试HTML:

<table>
    <tr class="faded">
        <td><div>testtesttesttestt</div></td>
        <td><div>testtsttesttesttt</div></td>
    </tr>
</table>

在IE9,10 FF24 Chrome 31+中一切正常,但在IE11中没有. 请记住,我不关心表行的内容,只关心背景不透明度. 屏幕截图和Jsfiddle如下.

IE10:

IE11:

http://jsfiddle.net/ZB3CN/6/

那么,这里发生了什么？

编辑:我已经向微软提交了一份错误报告: https ://connect.microsoft.com/IE/feedback/details/868842/ie-11-setting-css-opacity-on-a-table-row-doesnt-影响最背景颜色的-即行

编辑2:此错误已得到Microsoft的确认

编辑3:Microsoft已将此错误移至新位置: https ://developer.microsoft.com/en-us/microsoft-edge/platform/issues/212446/

Answer 1

这似乎是另一个IE错误..作为一种解决方法,您可以改为opacity通过背景属性添加rgba()颜色.然后只需将不透明度添加到td元素中.

更新示例 - 结果在浏览器中看起来一致.

.faded {
    background-color: rgba(255, 0, 0, 0.4);
    height: 100px;
}
td {
    opacity:0.4
}

Answer 2

如果其他人有问题，它可以帮助我：

.foo {
  opacity: 0.4;
  position: relative; /* for IE */
}

更多信息