CSS Opacity not working in IE11

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

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: 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/

Was it helpful?

Solution

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
}

OTHER TIPS

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" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top