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

【问题标题】：HTML5 Video causes weird glitch in CSS :hover transition, doesn't work well cross-browserHTML5 视频导致 CSS 出现奇怪的故障：悬停过渡，跨浏览器效果不佳
【发布时间】：2011-09-17 17:19:54
【问题描述】：

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

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

不过，我最近添加了“projekktor”HMTL5 视频播放器。效果非常好，但如果您开始播放视频，然后将徽标悬停，当您将鼠标悬停时，它就会出现故障。

此外，Google Chrome 不会播放从 ea.com 提供的视频战地3剪辑。 Chrome不会玩，这两件事让我发疯。他们可能有关系吗？我做错了什么？

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

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

【问题讨论】：

你能不能把故障的小视频放在某个地方，对我来说它似乎工作正常
问题出在 Safari 中。它在 Chrome 中适合你吗？
是这个问题吗？它在 IExplore 中也被破坏了...imageshack.us/photo/my-images/857/glitchg.png
不，这只是由于我目前缺乏 IE 错误修复。你在 Safari 中试过吗？如果您能告诉我您要在哪些浏览器中播放，我将不胜感激。
起初我错过了 Safari 参考（blush），但我在 Opera（对我来说看起来不错）、Firefox（完全没有问题 - 不慢或任何东西）和探索者

标签： hover sprite html5-video css-transitions

【解决方案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>

【讨论】：