CSS 不透明度在 IE11 中不起作用

Question

我正在尝试使用此 CSS 使tr的background-color变得不透明：

.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： IE10

IE11： IE11

那么，这里发生了什么？

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

编辑 2：此错误已由 Microsoft 确认

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

Answer 1

这似乎是另一个 IE 错误。作为一种变通方法，您可以改为通过具有rgba()颜色的背景属性添加opacity 。 然后简单地将不透明度添加到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 */
}

Answer 3

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

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

Answer 4

尝试添加<!DOCTYPE html>声明。 看到这个答案

Answer 5

这个解决方案对我有用。

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

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