视频对单击叠加<a>元素的反应 (IE10)

Question

客户端仍在使用IE10（不，可悲的是，升级似乎不是一个选择）已经报告了我们已设置的HTML的问题。p>我们有一个视频，该视频是通过Vimeo iframe嵌入的，这被一个链接覆盖，绝对位于视频之外的宽度100％100％。当您单击此链接时 - 无论您在何处单击视频，都按预期遵循链接。

当您单击IE10中的"链接"并可能较低时，视频会通过暂停和链接对其做出反应，除非您明确单击链接文本。

粗略代码大纲如下：

<div>
    <iframe width="100%" height="100%" src="VIMEO URL HERE"></iframe>
    <a href="/link-here">link text</a>
</div>
div {
    position: relative;
}
iframe {
    position: absolute;
    z-index: 1;
}
a {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
}

是否有一种方法可以在较旧的浏览器中进行修复，以便链接真正覆盖视频，因此视频无法对单击做出反应？如果需要使用JavaScript解决方案，我们在网站上有jQuery 1.x（这是一个古老的解决方案，我们正在重建中间）

）

这是指Godepen的链接，显示了问题背后的代码，但是，它不会在IE10中打开！http://codepen.io/anon/pen/vxlegq

Answer 1

因此，根据您的Codepen创建了我自己的示例；现在，我只能在IE 11中进行测试并模仿IE 10，在这里没有本地IE 10 - 但我认为这也应该在"真实"中使用。

较旧的IE有时会出现正确的问题，从而在"透明"元素上单击了单击 - 但是设置背景通常可以修复该元素，并且通过rgba，背景也可以透明（只需使用transparent关键字似乎不起作用。）

因此，请尝试将其添加到您的链接中，这也应该使其在IE 10中正确单击：

background: rgba(255,255,255,0);