CSS Opacity not working in IE11

Question

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:

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/

Answer 1

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
}

Answer 2

If someone else has a problem, it helped me:

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

More info

Answer 3

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

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