为什么我的 CSS 工具提示在 Google Chrome 中无法正常运行，但在 Firefox 中却正常？答案

【问题标题】：Why is my CSS tool tip not functioning properly in Google Chrome, but fine in Firefox?为什么我的 CSS 工具提示在 Google Chrome 中无法正常运行，但在 Firefox 中却正常？
【发布时间】：2011-02-28 21:08:25
【问题描述】：

http://betawww.helpcurenow.org/media/press/

你会看到我在锚点中使用了 span，span.hover-description 设置为 display:none;默认情况下，在 a:hover 上，跨度设置为显示块，并且绝对定位以在将鼠标悬停在“For Immediate Release”联系人姓名的姓名和电子邮件上时创建工具提示效果。

在 Firefox 中一切看起来都如你所愿，但 Chrome 在某处揭示了我未知的错误。

关于导致 Chrome 无法像 Firefox 一样显示的问题的任何帮助？

顺便说一句，Explorer 按预期显示了工具提示，尽管我在名称下方遇到了一个奇怪的底部边距问题，并且 Safari 与 Chrome 有相同的问题（必须是我需要适应的 webkit 渲染设置）。

【问题讨论】：

该链接需要将近 3 分钟才能加载
是的，该网站尚未优化。有兴趣了解您的连接类型、浏览器和操作系统吗？我们仍然需要缩小代码、组合脚本等。

标签： css safari google-chrome webkit tooltip

【解决方案1】：

好的，我想通了。由于我使用了一个非常复杂的嵌套结构来完成 CSS 工具提示，我忽略了一个事实，即我实际上已经在 p 中嵌套了一个 p 标签，当然这是一个禁忌。

Firefox 对很多验证错误非常友好，但 Chrome 和 Safari 似乎要严格得多。

最后，我将 p 更改为 span 元素，所有浏览器都运行良好。

【讨论】：

我建议您获取 HTML Validator 扩展，因为它会立即向您显示该错误。