当span是锚点的子级时，不显示标题工具提示 [英] Title tooltip is not shown when span is child of anchor
问题描述
例如，考虑以下DOM结构.
For example, consider the following DOM structure.
<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>
问题是，将鼠标悬停在This is a link文本上不会显示工具提示，而将鼠标悬停在图像上却显示工具提示.这个问题不会在所有地方都发生，例如，如果页面上有多个上述的DOM片段，则某些鼠标悬停时会显示工具提示，而有些则不会.这种奇怪的行为仅在具有HTML 4过渡文档类型的IE8和IE9中(IE8和IE9分别以IE8和IE9标准模式运行).如果我使用严格的doctype，这个问题就消失了.
The issue is that hovering over This is a link text doesn't show the tooltip, while hovering over the image does show the tooltip. This issue doesn't occur everywhere i.e. if a page has multiple DOM snippets like above, some show tooltip on hover and some do not. This strange behavior is only in IE8 and IE9 with HTML 4 transitional doctype(IE8 and IE9 running in IE8 and IE9 standards mode respectively.). This issue goes away if I use strict doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
无论如何，这是否与JS有关?还是DOM中的其他原因可能导致了这种情况?
Can this be in anyway related to JS? Or is it something else in DOM that could be causing this?
我在stackoverflow中发现了与此问题类似的引用，但是没有一个解释发生这种情况的原因.
I found similar references to this problem in stackoverflow, but none of them explain the reason why this occurs.
HTML链接标题atrribute工具提示Internet Explorer 8
https://stackoverflow.com/a/7901175/1571437
推荐答案
尽管span是anchor的子元素，但由于其所包含的文本而具有一定的最小高度，因此锚点没有这样的高度IE中的任何高度.因此，每当您将鼠标悬停在文本上时，工具提示都不会出现.要进行验证，请在控制台中执行以下代码段
Even though the span which is a child of anchor has some minimum height because of the text it holds, the anchor as such doesn't has any height in IE. Because of this, whenever you hover over the text, the tooltip doesn't appear. To verify the same, execute the following code snippet in console
document.getElementById("element's id").offsetHeight // will return 0
这是IE中的错误，解决方法是执行以下操作:
This is a bug in IE and workaround would be to do something like following:
a[title] span {
display: inline-block;
}
这篇关于当span是锚点的子级时，不显示标题工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
