HTML5视频在CSS中导致奇怪的故障：悬停过渡，跨浏览器效果不佳

Question

我的主页在这里：http://thenozzle.net/

页面顶部的徽标是一个精灵，在顶部和底部之间切换以产生光晕效果。这是通过css转换和：hover伪元素完成的。

然而，我最近添加了"projekktor"HMTL5视频播放器。它运行得很好，但如果你开始视频，然后悬停在徽标上，当你鼠标悬停时，它会出现故障。

此外，谷歌浏览器不会播放ea.com提供的视频战地3剪辑。Chrome无法播放，这两件事让我抓狂。他们会有亲戚关系吗？我做错了什么？

Projekktor主页：http://www.projekktor.com/

它在每个浏览器中的表现都不同。在Firefox中速度慢得可怕，但它可以播放。在Safari中非常完美，CHrome根本不会播放，但Safari有一个故障标志。有什么想法吗？

Answer 1

我修复了它。我删除了两个锚点中的一个，并从div中删除了headlink text indent属性，并将其放在单个锚点上。奇怪的问题，奇怪的解决方案。为了将来的参考，不要试图对埋深超过一层的文本进行文本缩进，在滚动时，它会螺旋式地来回跳跃。

<div title="The Nozzle" id="headerlogo">
    <div title="The Nozzle" id="logo1"></div>
    <a style="text-indent:-9999px" title="The Nozzle" href="http://thenozzle.net/"><div title="The Nozzle" id="logo2"></div>The Nozzle</a>
</div>