CSS Opacity not working in IE11

html css internet-explorer internet-explorer-11

47,552

Solution 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
}

Solution 2

If someone else has a problem, it helped me:

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

More info

47,552

Author by

ToastyMallows

Been trying to program my way out of a paper bag since 2005. C#, ASP.NET, JavaScript, TypeScript, Python

Updated on December 31, 2020

Comments

ToastyMallows over 3 years
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/
ToastyMallows about 10 years

This does work in IE11. I'm generating the HTML from code behind, and it's so much easier to just set a class on the element rather than have multiple CSS classes for different colors.
Josh Crozier about 10 years

@ToastyMallows Yea, that sounds like a pain. I'm sure you're already aware of it, but you could apply the opacity to the table element instead - that appears to work in IE.. jsfiddle.net/NSc32
ToastyMallows about 10 years

I need to be able to make some rows opaque, and some rows not opaque. But thanks for the suggestion, that would be a good fix.
Josh Crozier about 10 years

@ToastyMallows You could also do this.. alternatively, the problem is eliminated if you change the display of the td element.. though not ideal, this works.
ToastyMallows about 10 years

the first one might actually work, I'll look into it more tomorrow. Thanks for your help.
ToastyMallows about 10 years

This works but it makes the code so much more complex. I've submitted a bug report to Microsoft: connect.microsoft.com/IE/feedback/details/868842/…
ToastyMallows almost 10 years

I'm going to accept this as an answer because I ended up going with one of the workarounds (setting the background color on all table cells instead of a table row).
John Odom almost 6 years

Could you explain why this would help with making the opacity work in IE11?
John Odom almost 6 years

One thing to note is that opacity adds transparency to both the parent AND child elements, while the rgba approach only adds transparency for the parent element.
JSON almost 6 years

@John Odom It has something to do with how the browser renders the page.
viking_grll over 4 years

@JSON it does NOT.
JSON over 4 years

@viking_grll then your issue has something other to due with IE 11. Not sure what to say but this is how you get ie to render the css correctly
viking_grll over 4 years

@JSON in the end I put the opacity on a div instead of on a table and that worked.
JSON over 4 years

@viking_gril did you clear your cache? You gotta clear you cache if it is in a css file