Question

我在div的底部绘制一个尖三角形，使用：after伪元素。它按设计工作。但是，当我为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不透明度过滤器添加到#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）;”）

有谁知道为什么会这样，以及如何解决这个问题？

感谢。

Answer 1

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

Answer 2

问题在于IE Visual Filters（就像你正在使用的alpha版本）是在IE之前实现的：之后和之前开发的。

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

唉，这是唯一可以做到的方法

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

2 个答案: