html - 在 Chrome 浏览器中，如果链接位于带有控件的视频元素上，则链接不可点击

Question

我在 HTML5 文档中有一个视频元素。有一个控制面板 div 可以动态滑出以部分覆盖视频元素。

这在 Firefox 和 IE9 中工作正常。但是，在 Google Chrome 中，位于视频元素之上的任何链接的任何部分都不可点击。当您将鼠标悬停在链接上时，指针不会改变，点击链接也没有任何效果。

如果我将视频元素设置为不显示控件，问题就解决了。但奇怪的是，如果 Video 元素以启用的控件开始，然后我动态删除 Controls 属性，则链接不可点击。我试过同时使用 jQuery 和常规 JavaScript。

目前我不需要显示控件，所以我的页面是可以的。但我想更好地理解这个问题(另外，如果其他人有同样的问题，也许这篇文章会对他们有所帮助？)。有人知道吗，与 IE9 和 FF 相比，Chrome 处理视频元素的方式有什么不同吗？

Answer 1

我已将 z-index 添加到您代码中的两个重叠元素，它对我有用。例如，第一个 div 的 CSS 更改为:

div.first {
  left: 0;
  top: 0;
  z-index: 255;
}

第一个video被改成:

<video controls style="z-index:0">

我可以单击第一个 div 中的链接，包括 float 在 video 元素上的那部分。