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/

那么，这里发生了什么？

编辑：我已向Microsoft提交了错误报告： https://connect.microsoft.com/IE/feedback/details/868842/ie-11-setting-css-opacity-on-a-table-row-doesnt-affect-the-background-color-of-that-row

编辑2：此错误已由Microsoft

确认

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

Answer 1

这似乎是另一个IE错误..作为解决方法，您可以通过background opacity颜色添加rgba()。然后只需将不透明度添加到td元素。

Updated Example - 各种浏览器的结果似乎一致。

.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 */
}

More info

Answer 3

将此行添加到html的头部，不透明度将正常工作

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 4

尝试添加DefaultEndpointsProtocol=http声明。看到这个answer

Answer 5

这个解决方案对我有用。

background-color: rgba(18, 21, 23, 0.3);

最后一个参数是 alpha 通道（颜色的不透明度），您可以将它从 0.0 传递到 1.0 以调整您的颜色不透明度。