IE8 :after, :before opacity bug [重复]

Posted 2023-03-06

【中文标题】IE8 :after, :before opacity bug [重复]

【英文标题】：IE8 :after, :before opacity bug [duplicate]

【发布时间】：2012-04-24 15:19:49

【问题描述】：

在 Internet Explorer 8 中，伪元素似乎不支持不透明度：

例子：

# div:after  
   content: '';
   background: red url('pattern.png') no-repeat left top;
   position: absolute;
   top: 0;
   left: 0;
   height: 300px;
   width: 300px;
   opacity: 0.10;
   filter: alpha(opacity=10);

有谁知道我该如何解决这个问题，所以我有不透明度为 0.10 的图案。

【问题讨论】：

IE8 根本不支持opacity。这不仅仅是一个伪元素问题。

确实如此。但是使用“过滤器”选项，您可以.. 但这也不起作用。 filter: alpha(opacity=50) 也不起作用。

现在您在哈希和元素选择器之间有了一个空格 (# div)。这是对应的代码吗？

让我们缩小范围： 请检查您的文档的 Doctype 是否没有将您的 IE8 呈现为 IE7（可以在开发人员工具中的“文档”下看到mode')，因为 IE7 缺乏对伪元素的支持，而 IE8 相当兼容（一些小错误，应该不会影响这一点）。

空间不是问题。当我提交问题时，它改变了它。文档模式：IE8标准。使用 IE9 内置工具检查 IE7 和 IE8 中的网站。

【参考方案1】：

filter 属性仅适用于 IE5-7，要支持 IE8 中的不透明度，您必须使用以下内容：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";

查看此code snippet from 'CSS-Tricks' on cross browser opacity 的完整参考。

【讨论】：

没错。即使使用 -ms-filter: (etc..) 它也不起作用。我用过滤器尝试了一切。我认为问题在于它是一个伪元素。有没有办法用 javascript 做到这一点？

您正在考虑订购吗？如果您同时添加filter 和-ms-filter，则后者应首先出现。

是的，我正在考虑订单。我已经测试了所有可能的方法。这不是代码中的错误或类似的错误。我需要使用 javascript 的解决方法。

filter:alpha(opacity=10) 在 IE8 中运行良好。