Geek Answers Handbook

CSS opacity not working in IE11

I am trying to make background-color tr opaque using 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 am not interested in the contents of the table rows, only the opacity of the background. Screenshots and Jsfiddle below.

IE10: IE10

IE11: IE11

http://jsfiddle.net/ZB3CN/6/

So what is going on here?

EDIT: I sent 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 error has been confirmed by Microsoft.

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

+7
html css internet-explorer internet-explorer-11
source share
2 answers

This seems like another IE bug. Instead, you can add opacity via the background property with the color rgba() . Then just add opacity to the td element.

Updated example - results appear consistent between browsers.

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

add this line to your html header and the opacity will work fine

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+1
source share

More articles:


All Articles