IE渐变滤镜不响应点击事件

Question

我想要一个透明的背景颜色，我使用渐变滤镜作为RGBA在IE中的替代。代码如下所示：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfffffff,endColorstr=#bfffffff);

当用户单击背景时，我还希望触发一个事件，但是在设置过滤器后，点击事件似乎不会被触发。如果没有过滤器，一切正常。

那么这是另一个IE的bug吗？我该怎么解决这个问题？

- bububut

---

我希望你知道IE DX滤镜使用的是#AARRGGBB而不是#RRGGBBAA。 - Chris Morgan

是的，我做了。透明效果很好。问题在于我应用过滤器后无法触发点击事件。 - bububut

好的，我只是想确保你已经明白了。第一次遇到这种情况时，它让我措手不及。如果我当时仔细看你问题的形式，我应该就能看出你在做什么了。几天前我也想到了完全相同的技巧...你发现的这个有趣的问题可能会在以后节省我的时间，如果我使用它的话！ - Chris Morgan

在我看来，过滤器并不是一个好的选择 - 很明显你正在处理一个较旧版本的IE（IE 10即将发布）。那么，为什么不只在较旧版本的IE中使用背景图像呢？ :) - Scott Simpson

Answer 1

这可能与IE的一个bug有关，使得透明背景的链接不再可点击：我今天遇到了这个问题。我有一个具有透明背景和块状显示设置的链接：链接的主要区域无法点击，但我在其上设置的10px边框可以点击。看来IE也有滤镜的问题。

这种bug在这里和这里都有讨论。第一个解决方案是在设置滤镜之前给元素一个虚假的背景图像。第二个解决方案是给元素一个背景颜色，并将不透明度设置为1％，这将使它在IE中几乎不可见。希望您能使用其中一个方法解决此问题。

- And Finally

Answer 2

这不是交易的问题。 Internet Explorer 在一个单独的图层上创建过滤器，该图层位于您的元素之上。由于新的图形图层不是元素的一部分 - 您在其上具有点击事件 - 因此不会发生事件冒泡。

最近我制作了一个带有漂亮渐变过滤器的标签元素。只有文本可以被点击。如果我从具有和不具有渐变层的侧面分析标签层，则您将理解问题所在。

without gradient filter:

------------------
 text layer
------------------
 background layer
------------------


with gradient filter:

------------------
 text layer
------------------
 gradient layer
------------------
 background layer
------------------

顺便说一下，这就是为什么你不能在渐变滤镜上放置边框半径的原因。试试吧。创建一个元素，并用边框半径和渐变滤镜对其进行样式设置，然后在IE 9中运行它。无论你如何尝试强制渐变保持在圆形边框内 - 例如使用overflow:hidden - 它永远不会服从。就像一个单独的元素，它被绝对定位并位于你的元素正上方以覆盖它，在文本正下方。

- Lajos Mészáros