Question

例如，请考虑以下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片段，有些在悬停时显示工具提示而有些则没有。这种奇怪的行为仅在IE8和IE9中具有HTML 4过渡文档类型（分别在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 link title atrribute tooltip internet explorer 8

https://stackoverflow.com/a/7901175/1571437

Answer 1

即使作为span的孩子的anchor由于其所持有的文本而具有一些最小高度，因此锚在IE中没有任何高度。因此，无论何时将鼠标悬停在文本上，都不会显示工具提示。要验证相同，请在控制台

中执行以下代码段

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

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

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

Answer 2

稍微提一下我在这个上下文中的IE神秘（在IE7模式下的IE9）。我与标题 - 工具提示的链接中有嵌套的div，工具提示显示 - 但如果下面有一个spacer-div，其定义中有“clear：both”。我从间隔物中取出透明胶后，工具提示显示。之前，它们没有显示在垫片上方的行中，但是它们在垫片下面工作。是啊。还有一些小时的实验来寻找IE解决方法。

当然，没有明确的间隔：两者都不能很好地工作（FF把它放在上面的其他内容之上......）。最后，它有助于将title-atts放在内部div而不是链接本身。

当span是锚的子节点时，不显示标题工具提示

2 个答案: