Arj*_*jun 3 html anchor internet-explorer tooltip title
例如,请考虑以下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中找到了类似的对这个问题的引用,但没有一个解释为什么会发生这种情况.
即使由于它所持有的文本span而anchor具有一些最小高度的子项,因此这样的锚在IE中没有任何高度.因此,无论何时将鼠标悬停在文本上,都不会显示工具提示.要验证相同,请在控制台中执行以下代码段
document.getElementById("element's id").offsetHeight // will return 0
这是IE中的一个错误,解决方法是执行以下操作:
a[title] span {
display: inline-block;
}
| 归档时间： |
|
| 查看次数： |
8435 次 |
| 最近记录： |