Question

A client still using IE10 (and no, sadly, upgrading doesn't seem to be an option here) has reported an issue with a piece of HTML we've set up.

We've got a video, embedded via a Vimeo iframe, and this is overlaid by a link, positioned absolutely, width 100% height 100% on top of the video. When you click this link - no matter where on the video you click, the link is followed as expected.

When you click on the "link" in IE10 and possibly lower, the video reacts to it by pausing and the link is not followed UNLESS you click explicitly on the link text.

Rough code outline follows:

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

Is there a way to fix this in older browsers so that the link truly overlays the video and the video therefore can't react to the click? We have jQuery 1.x on the site if a Javascript solution is required (it's quite an old one, we're in the middle of rebuilding)

Here's a link to a CodePen showing the code behind the problem but, brilliantly, it won't open in 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);

视频反应点击覆盖<a> element (IE10)

1 个答案: