CSS Opacity not working in IE11

StackOverflow https://stackoverflow.com/questions/23504400

题

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);
}

Here is my test HTML:

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

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/

So, what's going on here?

EDIT: I've submitted a bug report to 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

EDIT 2: This bug was confirmed by Microsoft

EDIT 3: Microsoft has moved this bug to a new location: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/212446/

有帮助吗？

解决方案

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
}

其他提示

If someone else has a problem, it helped me:

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

More info

Try adding <!DOCTYPE html> declaration. See this answer

This solution worked for me.

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

the last parameter is alpha channel (the opacity of the colour) you can pass it from 0.0 to 1.0 to adjust your colour opacity.

add this line to the head of your html, and the opacity will work fine

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top