视频反应点击覆盖的<a>元素（IE10）-Java 学习之路

一个仍在使用IE10的客户端（不，遗憾的是，升级似乎不是一个选项）已经报告了我们设置的一个HTML的问题 .

我们有一个视频，通过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（这是一个很旧的，我们正处于重建阶段）

这里's a link to a CodePen showing the code behind the problem but, brilliantly, it won'在IE10中打开！ http://codepen.io/anon/pen/vxLEgQ

1 回答

1
所以，基于你的codepen创建了我自己的例子;现在我只能在IE 11中测试并模拟IE 10，这里没有本机IE 10 - 但我认为这应该也适用于“真正的” .

较旧的IE有时会在正确捕获“透明”元素上的点击时出现问题 - 但设置背景通常会修复此问题，并且通过 rgba 背景也可以是透明的（仅使用 transparent 关键字似乎不起作用 . ）

所以，试着简单地为你的链接添加它，这应该使它在IE 10中也可以正确点击：
```
background: rgba(255,255,255,0);
```
回复于 2024-05-17T10:06:45+08:00

视频反应点击覆盖的<a>元素（IE10）

1 回答

相关问题