悬停CSS仅在Chrome中工作_Css_Google Chrome_Hover_Visibility_Doctype

悬停CSS仅在Chrome中工作

css google-chrome

悬停CSS仅在Chrome中工作,css,google-chrome,hover,visibility,doctype,Css,Google Chrome,Hover,Visibility,Doctype,嘿，我正在尝试使用CSS hover类，它在Chrome上运行良好，但在Firefox上不行。谢谢你的帮助。以下是我的CSS： .albumbox .labeltext { visibility: hidden; } .albumbox:hover .labeltext { visibility: visible; } 以下是相关的HTML： <a href="http://open.spotify.com/album/2tG6kmDtT5rysmQAtzm5UW" t

嘿，我正在尝试使用CSS hover类，它在Chrome上运行良好，但在Firefox上不行。谢谢你的帮助。以下是我的CSS：

.albumbox .labeltext {
    visibility: hidden;
}

.albumbox:hover .labeltext {
    visibility: visible;
}

以下是相关的HTML：

<a href="http://open.spotify.com/album/2tG6kmDtT5rysmQAtzm5UW" target="_blank"><div class='albumbox'>

<img height="200px" width="200px" src="http://userserve-ak.last.fm/serve/300x300/9351489.jpg" />

<span class='album labeltext'>Escape The Fate<br>Escape The Fate</span>

</div></a>

如果您想查看整个页面，请在此处查看

谢谢

Tom

这是因为在内联元素中有块级元素，也就是说，在

中有一个

，Firefox选择以不同于Chrome的方式呈现它，因为行为是未指定的

最简单的补救方法是使用span而不是div，无论哪种方式，内联元素中都不能有块级元素，也不能指望它在所有浏览器上都能正常工作。

最紧迫的原因是您的页面在中呈现

添加这个（HTML5 doctype）作为源代码的第一行，我很确定它会自动工作：

<!DOCTYPE html>

我认为这是因为在CSS中只有

标记具有

：hover

事件。为什么不命名links的类albumbox并将其设置为

display:block通过CSS
结果是一样的，但可能会更“符合”
 +1。我想补充一点，您可以使用内联块
而不是块
来解决这个问题。到目前为止，最简单的解决方法是我的答案。没有doctype是相当愚蠢的。@thirtydot，添加doctype并不能解决无效标记的根本问题。确实需要它，但是标记也应该被修复。带有doctype的版本现在是活动的。标记（可以在HTML5的链接中包含块元素），在这种情况下，它似乎可以在浏览器中工作，因此没有理由更改它。谢谢！这确实自动修复了它，尽管它被其他几个div甩出了位置等等。不过，我知道如何解决这些问题，除非还有其他问题，这也将解决Internet Explorer中的问题（悬停也不起作用）。没问题。我觉得很好！这只适用于像IE6这样的古老浏览器。（或怪癖模式下的IE7/IE8）。