Internet Explorer 的 css 问题：使用不透明度过滤器时的伪元素后答案

【问题标题】：Internet Explorer's problem with css :after pseudo element when using opacity filterInternet Explorer 的 css 问题：使用不透明度过滤器时的伪元素后
【发布时间】：2011-05-26 01:35:08
【问题描述】：

我正在使用 :after 伪元素在 div 的底部绘制一个尖三角形。它按设计工作。但是，当我为 div 添加不透明度过滤器时，它在 IE 中停止工作（我正在 IE8 上对其进行测试）。它在 FF、Chrome 和 Safari 中运行良好。

这里是 HTML：

<html>
    <head></head>
    <body>
        <div id="demo"></div>
    </body>
</html>

这里是 CSS：

#demo {
  background-color: #333;
  height: 100px;
  position: relative;
  width: 100px;
}
#demo:after {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid transparent;
  border-top-color: #333;
  top: 100%;
  left: 10px;
}

在 IE 中运行它并在此处查看类似于图像的结果：link text

现在将 IE opacity filter: 添加到#demo，使其看起来像这样并再次在 IE 中运行：

#demo {
  background-color: #333;
  height: 100px;
  position: relative;
  width: 100px;

  filter: alpha(opacity=50);
}

请注意，不透明度过滤器有效，但 div 底部的三角形消失了。同样的事情在所有其他浏览器中都可以正常工作（唯一的区别是您需要使用“opacity: 0.5”而不是 IE 特定的“filter: alpha(opacity=50);”）

有人知道为什么会这样，以及如何解决吗？

谢谢。

【问题讨论】：

标签： css internet-explorer opacity

【解决方案1】：

问题在于 IE 视觉过滤器（如您正在使用的 alpha 过滤器）是在 :after 和 :before 在 IE 中实现之前开发的。

你应该用另一个 div 容器包装#demo div，并在上面加上不透明度（确保容器 div 有布局）。

唉，这是唯一的办法

【讨论】：

【解决方案2】：

要渲染的过滤器对象must have layout。伪元素：在没有布局之后。很抱歉这么说。

【讨论】：

谢谢莱克斯。我改变了我的实现，现在使用第二个 div 而不是 :after 来绘制三角形。