当span是锚点的子元素时，标题提示工具未显示

Question

当span是锚点的子元素时，标题提示工具未显示

4

例如，考虑以下DOM结构。

<a href="#" title="The Anchor">
  <img src="http://www.adiumxtras.com/images/thumbs/dango_status_icon_set_7_19047_6248_thumb.png" />
  <span>This is a link</span>
</a>

问题在于悬停在“这是一个链接”文本上不会显示工具提示，而在图像上悬停会显示工具提示。这个问题并不是普遍存在的，即如果一个页面有多个类似上面的DOM片段，则有些会在悬停时显示工具提示，而有些则不会。这种奇怪的行为只出现在使用HTML 4 transitional doctype的IE8和IE9中（分别在IE8和IE9标准模式下运行）。如果我使用严格的doctype，这个问题就会消失。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

这是否与JS有关？或者是DOM中的其他原因引起的？

我在stackoverflow上找到了类似的问题，但没有一个解释为什么会出现这种情况。

HTML链接标题属性提示Internet Explorer 8

https://dev59.com/9FnUa4cB1Zd3GeqPb5hh#7901175

- Arjun

在我的电脑上显示正常，无论是在IE还是FF浏览器中。 - specialscope

可能最好的方法是为每个单独的元素设置单独的标题属性。 - specialscope

是的。那肯定是一种解决方法。但我的动机是找出为什么它不起作用。 - Arjun

Internet Explorer的家伙，自从什么时候在IE中东西就能正常工作了！ :) 不要费力地去理解IE，找到一个解决方法并且对此感到高兴。 - specialscope

只发现这种情况在IE8和IE9中发生。为了始终能够重现此问题，需要满足以下条件： 1）锚点的子元素应仅为内联元素 2）元素之间不应有空格。 - Arjun

不仅仅是空格。任何字符都不应该存在。 - Arjun

2个回答

1

在这个上下文中，我遇到了一个IE谜团（IE9在IE7模式下）。我的带有标题工具提示的链接中嵌套了div，并且工具提示显示出来了，但是如果下面有一个带有“clear:both”的间隔器div，则不会显示。在我从间隔器中删除清除后，工具提示就显示了。在此之前，它们在间隔器上面的行中不显示，但在间隔器下面起作用。经过更多小时的实验，找到了IE的解决方法。

当然，没有clear:both的间隔器效果不太好（FF将其放在其他内容的顶部..）。最后，将标题属性放在内部div而不是链接本身上有所帮助。

- hyphan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arjun · Accepted Answer

尽管作为子元素的因为其所包含的文本而具有一定的最小高度，但是在IE中，本身没有任何高度。因此，当您将鼠标悬停在文本上时，工具提示不会出现。要验证这一点，请在控制台中执行以下代码片段：

document.getElementById("element's id").offsetHeight // will return 0

这是IE中的一个错误，解决方法是执行以下操作：

a[title] span {
    display: inline-block;
}