在Edge浏览器中，`pointer-events: none;`对于iframe无效。

Question

我在iframe上应用了pointer-events: none;，它在所有主流浏览器中都能正常工作，但在Edge（测试版本为Edge 16）中无效。在Edge中，我仍然可以点击iframe内部的任何内容。我还尝试将样式应用于iframe的父级div，但没有任何作用。 注意：我不能在iframe内部应用样式。

<div style="pointer-events: none;">
  <iframe>...</iframe>
</div>

<iframe style="pointer-events: none;">...</iframe>

有没有解决方法？

- Dmitriy Kozyatinskiy

---

你有访问iframe内容的权限吗？ - Alessio

@Alessio 不，我不这样做。 - Dmitriy Kozyatinskiy

你可以尝试给iframe定位absolute，并给它一个负的z-index。 - Alessio

好的，请尝试在CodePen或Fiddle上发布完整代码，这将使解决问题变得更容易！ - Alessio

让我们在聊天中继续这个讨论。 - Alessio

Answer 1

经过进一步调查，发现这是Edge v16（Edge/16.16299）中的一个bug，而在Edge v15以及更早版本中一切正常。 所以，请注意：在Edge v16中，“pointer-events: none;”对iframe没有任何影响，即使您将其应用于父容器。

更新：我已向Edge开发团队提交了错误报告，他们在4月份的发布版中进行了修复。 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14961910/

- Dmitriy Kozyatinskiy

Answer 2

确实，该CSS属性有点不稳定。尝试在app.css中添加以下属性:

.upgrade-banner .row .col.upgrade {
    ...
    pointer-events: none;
}

对于iframe内的所有可点击项。

在浏览器堆栈（Edge 16）中进行测试可以正常工作：

- Alessio

---

正如我所说，我无法访问iframe内容。 - Dmitriy Kozyatinskiy

好的，那么加一个透明度更高的伪元素呢？ - Alessio