CSS透明度不工作在IE11 [英] CSS Opacity not working in IE11

问题描述

我试图用这个CSS c> c> c>使 background-color >

I'm trying to make the background-color of a tr opaque with this CSS:

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

这是我的测试HTML：

Here is my test HTML:

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

一切正常在IE9,10 FF24 Chrome 31+，但不是在IE11。 请记住，我不在乎表格行的内容，只有背景不透明度。屏幕截图和Jsfiddle下面。

Everything works fine in IE9,10 FF24 Chrome 31+, but not in IE11. Please keep in mind that I don't care about the content of the table rows, only the background opacity. Screenshots and Jsfiddle below.

IE10：

IE10:

IE11：

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该行的颜色

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

推荐答案

这似乎是另一个IE错误..作为一个解决方法，你可以改为添加 opacity 通过background属性与 rgba（）颜色。然后只需向 td 元素添加不透明度。

That appears to be yet another IE bug.. As a work-around, you could instead add the opacity via the background property with a rgba() color. Then simply add the opacity to the td element.

更新示例 - 各个浏览器的结果一致。

Updated Example - results seem consistent across browsers.

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

这篇关于CSS透明度不工作在IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！