HTML5视频在CSS中导致奇怪的小故障：悬停转换，不能很好地跨浏览器 [英] HTML5 Video causes weird glitch in CSS :hover transition, doesn't work well cross-browser

问题描述

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

页面顶部的徽标是精灵，在顶部和底部之间切换以提供发光效果。这是通过css转换和：hover伪元素完成的。然而，我最近添加了'projekktor'HMTL5视频播放器。它的效果非常好，但如果你开始播放视频，然后悬停标志，当鼠标悬停时会出现问题。

此外，Google Chrome浏览器不播放由ea.com提供的视频
战地3剪辑。 Chrome将无法播放它，这两件事情正在让我疯狂。他们是相关的吗？我做错了什么？

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

它在每个浏览器中都有不同的表现。 Firefox的速度非常慢，但它起了作用。完美的Safari浏览器，CHrome它根本不会播放，但Safari浏览器的标志很糟糕。任何想法？

解决方案

我修正了它。我删除了两个锚点中的一个，并从div中删除了headlink text-indent属性，并将其放在单个锚点上。奇怪的问题，怪异的解决方案。为了将来的参考，不要尝试文字缩进深度超过一层的文本，在你的翻滚时，它会跳跃地跳来跳去。

 < div title =The Nozzleid =headerlogo> 
< div title =The Nozzleid =logo1>< / div> 
< a style =text-indent：-9999pxtitle =The Nozzlehref =http://thenozzle.net/>< div title =The Nozzleid =logo2 >< / div>喷嘴< / a> 
< / div> 
  

I've got my main page here: http://thenozzle.net/

The logo at the top of the page is a sprite, switches between top and bottom to give the glow effect. This is done with css transition and :hover pseudo element.

However, I recently added the 'projekktor' HMTL5 video player. It works really well, but if you start the video, then hover of the logo, it glitches out when you mouse-over.

Also, Google Chrome doesn't play the video served from ea.com The Battlefield 3 clip. Chrome won't play it, these two things are driving me nuts. COuld they be related? What am I doing wrong?

Projekktor homepage: http://www.projekktor.com/

It performs differently in every browser. Horribly slow in Firefox, but it plays. Perfect in Safari, CHrome it won't play at all, but Safari has the glitchy logo. Any ideas?

解决方案

I fixed it. I removed 1 of the two anchors, and removed the headlink text-indent property from the div, and put it on the single anchor. Weird problem, weird solution. For future reference, don't try to text-indent text that buried more then one level deep, on your rollover it will jump back and forth spiratically.

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

这篇关于HTML5视频在CSS中导致奇怪的小故障：悬停转换，不能很好地跨浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！