HTML5视频在CSS中引起奇怪的毛刺:悬停过渡，不能很好地跨浏览器工作

Question

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

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

然而，我最近添加了'projekktor‘HMTL5视频播放器。它工作得很好，但如果你开始播放视频，然后悬停徽标，当你将鼠标悬停在上面时，它就会闪现。

此外，谷歌的Chrome浏览器也不能播放ea.com上的“战场3”视频。Chrome不会播放，这两个东西快把我逼疯了。COuld他们有关系吗？我做错了什么？

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>