IE9 中未显示锚标题的工具提示答案

【问题标题】：Tooltip on anchor's title not shown in IE9IE9 中未显示锚标题的工具提示
【发布时间】：2011-10-12 23:15:46
【问题描述】：

IE9 处理锚标记中的 title 属性的方式是否有所改变？我尝试使用常规锚点，例如 -

<a href="http://www.somelink.com" title="Some title here">This is a link</a>

工具提示应该与标题一起出现，它确实出现在以前版本的 IE 和其他浏览器中，但不会出现在 IE9 上。这有什么已知的问题吗？我试图在网上搜索，但没有找到任何关于此的内容。有任何想法吗？谢谢

【问题讨论】：

我无法复制您的问题。假设标签是页面的主要内容，在 IE9 中工具提示显示正常。

标签： html tooltip internet-explorer-9 anchor

【解决方案1】：

我在一些我从事过的应用程序中遇到了这个问题。

我发现如果您在带有标题的元素内有嵌套元素，则它不起作用。

对于我来说，下面的示例在 IE9 中没有显示它的标题：

<a href="test.html" title="test tooltip"><span>test link</span></a>

但是，这个例子确实有效：

<a href="test.html" title="test tooltip">test link</a>

即使用 XHTML 1.0 过渡文档类型和浏览器模式：IE9 和文档模式：IE9 标准。

显然您的示例没有嵌套元素，但认为它可能与某些根据标题找到此帖子的人有关。

您可以通过将嵌套元素指定为内联块来克服 IE 中的此限制：

a span {
    display: inline-block;
}

【讨论】：

更多相关答案在这里stackoverflow.com/questions/13246818/…
正如文中所说，这不适用于问题中的代码，因此它不是答案（对所提出的问题）。

【解决方案2】：

上面的 href 链接代码在 IE9 中运行良好。这让我相信页面上的其他东西导致了这个问题。您是否尝试过验证您的 html？ http://validator.w3.org/

可能是其他浏览器刚刚浏览过的其他问题。也许它的嵌套方式导致 IE9 忽略了该标记。

【讨论】：

我尝试验证页面，有 8 个错误，但在页面的其他位置，与锚点无关。这是一个长标签云的页面（大约500个标签，每个标签是一个链接）。您可能会查看页面，它是希伯来语的，但无论如何您可以将鼠标悬停在每个链接上，并看到在 IE9 中没有工具提示，而其他人确实有。这是实际页面 - tv.social.org.il/tags
我在您网站上的 IE9 链接中看到标题有效。试试这个，在 IE9 中打开你的页面，然后按 f12。看看你是在IE9兼容模式、Quirks还是IE7模式？ ...或者它可能是由您安装的浏览器工具栏引起的？如果您有工具栏，请尝试卸载它以查看它是否有效。
我自己没有 IE9，但我今天检查了 2 个，它也可以工作。出于某种原因，在客户的装有 IE9 的 PC 上发生了这种情况，我会尝试让他检查他的 PC，但我很高兴知道这不是网站的问题或 IE9 的其他问题。谢谢

【解决方案3】：

我找到了一个很好的解决方法，将您的标题放在 abbr 标记中。我已经在 Safari、Chrome、IE9 和 Firefox 中对此进行了测试。它适用于所有这些。

【讨论】：

【解决方案4】：

一种解决方法是在内部标签之外放置至少一个字符：

<a href="#" title="Tooltip"><font color="blue">This does not work</font></a>
<a href="#" title="Tooltip"><font color="blue">This</font> <font color="blue">does work</font></a>

【讨论】：

为什么在示例中使用了不推荐使用的字体标签？我知道那是几年前的事了，但自 HTML 4 以来，字体标签已被弃用，HTML 4 是 1997 年 12 月发布的 W3C 推荐标准！

【解决方案5】：

我有一个典型的场景，我们必须显示带有工具提示的图像。图像位于 iframe 中，并且在具有 IE 10 兼容模式的浏览器中打开时未显示工具提示。

alt 标签帮助了我。解决方案是设置图像 alt 标签。

<A onclick=navigate() title="Did not work" href="javascript:void(0);" height="" width="">
  <IMG alt="This worked" src="http://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/icons/imageviewer_back_button.gif">
</A>

【讨论】：