CSS Opacity not working in IE11

2020-03-01 08:02发布

站内问答 / HTML/CSS
899 4 6

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/

4条回答
虎瘦雄心在
2楼-- · 2020-03-01 08:31

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
}
查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
3楼-- · 2020-03-01 08:45

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

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
4楼-- · 2020-03-01 08:47

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
查看更多
0人赞 添加讨论(0) 举报
▲ chillily
5楼-- · 2020-03-01 08:48

If someone else has a problem, it helped me:

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

More info

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)