CSS不透明度在IE11中不起作用

Posted

技术标签:

【中文标题】CSS不透明度在IE11中不起作用【英文标题】:CSS Opacity not working in IE11 【发布时间】:2014-06-23 15:20:48 【问题描述】:

我正在尝试使用此 CSS 使 background-colortr 不透明:

.faded
    background-color: red;
    height: 100px;
    opacity: 0.4;
    filter: alpha(opacity=50);

这是我的测试 html

<table>
    <tr class="faded">
        <td><div>testtesttesttestt</div></td>
        <td><div>testtsttesttesttt</div></td>
    </tr>
</table>

在 IE9,10 FF24 Chrome 31+ 中一切正常,但在 IE11 中却不行。 请记住,我不关心表格行的内容,只关心背景不透明度。下面的屏幕截图和 Jsfiddle。

IE10:

IE11:

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

那么,这里发生了什么?

编辑:我已向 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

编辑 2:此错误已由 Microsoft 确认

编辑 3:Microsoft 已将此错误移至新位置: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/212446/

【问题讨论】:

【参考方案1】:

这似乎是另一个 IE 错误。作为一种解决方法,您可以改为通过带有 rgba() 颜色的背景属性添加 opacity。然后只需将不透明度添加到td 元素。

Updated Example - 跨浏览器的结果似乎一致。

.faded 
    background-color: rgba(255, 0, 0, 0.4);
    height: 100px;

td 
    opacity:0.4

【讨论】:

这在 IE11 中有效。我正在从后面的代码生成 HTML,只需在元素上设置一个类而不是为不同颜色设置多个 CSS 类要容易得多。 @ToastyMallows 是的,这听起来很痛苦。我敢肯定你已经知道了,但是你可以将opacity 应用到table 元素上——这似乎在 IE 中有效。jsfiddle.net/NSc32 我需要能够使某些行不透明,而某些行不透明。但是感谢您的建议,这将是一个很好的解决方案。 @ToastyMallows 你也可以做this.. 或者,如果你改变td 元素的显示,问题就解决了。虽然不理想,this works。 第一个可能真的有用,我明天再研究一下。感谢您的帮助。【参考方案2】:

如果其他人有问题,它帮助了我:

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

More info

【讨论】:

【参考方案3】:

将此行添加到您的 html 的头部,不透明度将正常工作

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

【讨论】:

您能解释一下为什么这有助于使不透明度在 IE11 中发挥作用吗? @John Odom 这与浏览器如何呈现页面有关。 @JSON 它没有。 @viking_grll 那么您的问题与 IE 11 相关。不知道该说什么,但这就是您如何正确呈现 css 的方法 @JSON 最后我把不透明度放在一个 div 上而不是放在一个桌子上,这很有效。【参考方案4】:

尝试添加&lt;!DOCTYPE html&gt; 声明。看到这个answer

【讨论】:

【参考方案5】:

这个解决方案对我有用。

background-color: rgba(18, 21, 23, 0.3);

最后一个参数是 alpha 通道(颜色的不透明度),您可以将其从 0.0 传递到 1.0 以调整颜色不透明度。

【讨论】:

以上是关于CSS不透明度在IE11中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

不透明度在 IE8 中不起作用

悬停不透明度在 Chrome 或 IE 中不起作用

透明css在chrome中不起作用

CSS3 垂直弹出菜单 + 过渡在 FF 中不起作用

CSS 翻译在 SVG g 上的 IE11 中不起作用

为啥这个 CSS3 动画在 MS Edge 或 IE11 中不起作用?