Html CSS 不透明度在 IE11 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23504400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Opacity not working in IE11
提问by ToastyMallows
I'm trying to make the background-colorof a tropaque with this CSS:
我试图做background-color一个的tr这个CSS不透明：
.faded{
background-color: red;
height: 100px;
opacity: 0.4;
filter: alpha(opacity=50);
}
Here is my test HTML:
这是我的测试 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.
在 IE9,10 FF24 Chrome 31+ 中一切正常，但在 IE11 中则不然。 请记住，我不关心表格行的内容，只关心背景不透明度。屏幕截图和下面的 Jsfiddle。
IE10:
IE10：
IE11:
IE11：
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
编辑：我已向 Microsoft 提交了错误报告：https : //connect.microsoft.com/IE/feedback/details/868842/ie-11-setting-css-opacity-on-a-table-row-doesnt-影响该行的背景颜色
EDIT 2: This bug was confirmed by Microsoft
编辑 2：此错误已由 Microsoft 确认
EDIT 3: Microsoft has moved this bug to a new location:https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/212446/
编辑 3：微软已将此错误移至新位置：https : //developer.microsoft.com/en-us/microsoft-edge/platform/issues/212446/
回答by Josh Crozier
That appears to be yet another IE bug.. As a work-around, you could instead add the opacityvia the background property with a rgba()color. Then simply add the opacity to the tdelement.
这似乎是另一个 IE 错误。作为一种变通方法，您可以改为添加opacity带有rgba()颜色的via 背景属性。然后只需将不透明度添加到td元素。
Updated Example- results seem consistent across browsers.
更新示例- 结果在浏览器中似乎一致。
.faded {
background-color: rgba(255, 0, 0, 0.4);
height: 100px;
}
td {
opacity:0.4
}
回答by michal
回答by JSON
add this line to the head of your html, and the opacity will work fine
将此行添加到您的 html 的头部，并且不透明度将正常工作
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
