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

发布于 2024-10-08 10:23:52 字数 1083 浏览 6 评论 0原文

我使用 :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 中运行它并查看与图像类似的结果：链接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);”）

有人知道为什么会发生这种情况吗？如何绕过它？

谢谢。

原文

I am drawing a pointed triangle at the bottom of the div using :after pseudo-element. It works as designed. However, when I add the opacity filter for the div, it stops working in IE (I am testing it on IE8). It works just fine in FF, Chrome, and Safari.

Here is HTML:

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

Here is 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;
}

Run it in IE and see the result that looks like image here: link text

Now add IE opacity filter: to the #demo so it looks like this and run it in IE again:

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

  filter: alpha(opacity=50);
}

Notice that opacity filter works but the triangle at the bottom of the div disappeared.
The same thing works just fine in every other browser (the only difference is that you need to use "opacity: 0.5" instead of IE specific "filter: alpha(opacity=50);")

Does anybody know why this is happening, and how to get around it?

Thanks.

分享到QQ

分享到微博