html - 视频对点击覆盖的 元素使用react (IE10)

Question

一位仍在使用 IE10 的客户(不，遗憾的是，这里似乎没有升级选项)报告了我们设置的一段 HTML 的问题。

我们有一个视频，通过 Vimeo iframe 嵌入，它被一个链接覆盖，绝对定位，宽度 100% 高度 100% 在视频顶部。当您点击此链接时 - 无论您点击视频的哪个位置，都会按预期点击该链接。

当您在 IE10 或更低版本中单击“链接”时，视频会通过暂停对其作出 react 并且不会打开链接，除非您明确单击链接文本。

粗略的代码大纲如下:

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

有没有办法在旧版浏览器中修复此问题，使链接真正覆盖视频，从而使视频无法对点击使用react？如果需要 Javascript 解决方案，我们在站点上有 jQuery 1.x(它很旧，我们正在重建中)

这是一个指向 CodePen 的链接，其中显示了问题背后的代码，但出色的是，它无法在 IE10 中打开! http://codepen.io/anon/pen/vxLEgQ

Answer 1

因此，基于您的代码笔创建了我自己的示例；现在我只能在 IE 11 中测试并模拟 IE 10，这里没有原生 IE 10 - 但我认为这也应该在“真实”的 IE 中工作。

较旧的 IE 有时无法正确捕获对“透明”元素的点击 - 但设置背景通常可以解决这个问题，并且通过 rgba 背景也可以是透明的(只需使用 transparent 关键字似乎不起作用。)

因此，请尝试简单地为您的链接添加此内容，这样它也应该可以在 IE 10 中正确点击:

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