悬停 CSS 仅适用于 Chrome答案

【问题标题】：Hover CSS only working in Chrome悬停 CSS 仅适用于 Chrome
【发布时间】：2011-07-20 09:34:34
【问题描述】：

嘿，我正在尝试使用 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>

如果您想查看整个页面，请在此处查看http://fyspotify.appspot.com

谢谢汤姆

【问题讨论】：

标签： css google-chrome hover visibility doctype

【解决方案1】：

我相信这是因为只有 <a> 标签在 CSS 中具有 :hover 事件。你为什么不命名链接的类专辑框并通过 CSS 将其设置为 display:block;？

结果是一样的，但可能会更“符合”！

【讨论】：

这仅适用于IE6等古老的浏览器。 （或 IE7/IE8 处于 Quirks 模式）.

【解决方案2】：

最紧迫的原因是您的页面正在Quirks Mode 中呈现。

将此（HTML5 文档类型）添加为源代码的第一行，我很确定它会自动工作：

<!DOCTYPE html>

【讨论】：

谢谢！这确实会自动修复它，尽管它被其他一些 div 等抛出位置。不过，我知道如何解决这些问题
除非有其他问题，这也将解决 Internet Explorer 中的问题（悬停也不起作用）。
没问题。我觉得很好！

【解决方案3】：

这是因为内联元素中有块级元素，也就是说，<a> 中有一个 <div>，而 Firefox 选择以不同于 Chrome 的方式呈现它，因为行为未指定。

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

【讨论】：

+1。我要补充一点，您可以使用inline-block 而不是block 来解决这个问题。
迄今为止最简单的解决方法是我的回答。没有文档类型是相当愚蠢的。
@thirtydot，添加 doctype 并不能解决无效标记的根本问题。确实需要它，但标记也应该是固定的。
带有文档类型的版本现已上线。标记 doesn't cause (related) errors with HTML5（可以在 HTML5 链接中包含块元素），在这种情况下，它似乎在浏览器中有效，因此没有理由更改它。