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>

问题是悬停在This is a link文本上不会显示工具提示，而将鼠标悬停在图像上会显示工具提示。这个问题不会在任何地方发生，即如果一个页面有多个像上面这样的 DOM 片段，有些会在悬停时显示工具提示，有些则不会。这种奇怪的行为只存在于具有 HTML 4 过渡文档类型的 IE8 和 IE9 中（IE8 和 IE9 分别以 IE8 和 IE9 标准模式运行。）。如果我使用严格的文档类型，这个问题就会消失。

<!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://stackoverflow.com/a/7901175/1571437

4

2 回答 2

8

即使spanwhich is a child ofanchor具有一些最小高度，因为它包含的文本，锚本身在 IE 中没有任何高度。因此，每当您将鼠标悬停在文本上时，工具提示都不会出现。要验证相同，请在控制台中执行以下代码片段

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

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

a[title] span {
    display: inline-block;
}
于 2012-11-19T07:16:50.650 回答
1

稍微提一下我刚刚在这种情况下遇到的一个 IE 谜题（IE7 模式下的 IE9）。我与 title-Tooltips 的链接在其中嵌套了 div，并且工具提示显示 - 但如果下面有一个 spacer-div，其定义中带有“clear:both”，则不会。在我从垫片中取出清除后，工具提示出现了。以前，它们没有显示在垫片上方的行中，但它们在垫片下方工作。是的。多几个小时的试验来寻找 IE 解决方法。

当然，没有 clear:both 的分隔符不能很好地工作（FF 把它放在上面的其他内容之上..）。最后，它有助于将 title-atts 放入内部 div 而不是链接本身。

于 2013-07-17T15:35:04.290 回答