免责声明@H_403_2@
这个问题是转贴.我最初的要求是here.虽然有一个人足够友好地帮助我,但他最终找不到理想的解决方案.这种情况的现实是Doctype只是没有Stack Overflow拥有的大量用户.这对我来说是一个重要的问题,我真的需要更多意见.@H_403_2@
问题@H_403_2@
我已经使用HTML和CSS实现了树形视图.将鼠标悬停在此树形视图中的项目时,其下方会出现一个工具提示.一切在Firefox中都可以正常运行,但在Chrome或Firefox中却不能.@H_403_2@
我的问题是工具提示正在使用绝对定位来允许其内容显示在其他元素上.当我在Firefox中滚动时,这些工具提示的位置会移动以反映它们的新位置.但是,Internet Explorer保留元素的原始位置.因此,如果将鼠标悬停在滚动的元素上,则工具提示将显示在元素最初所在的位置下.@H_403_2@
我已经读过,可以通过添加位置来解决此问题：相对于我的树形视图,但这可以防止工具提示悬停在整个页面上.@H_403_2@
@H_403_2@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<!-- import css files -->
<link href="example.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="tree-view">
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
</div>
<div id="main-content">
main
</div>
</div>
</body>
</html>
这是示例的CSS：@H_403_2@
@H_403_2@
#wrapper
{
}
#tree-view
{
float: left;
width: 200px;
height: 400px;
background-color: #BBFFFF;
overflow: auto;
}
#main-content
{
float: left;
width: 600px;
height: 400px;
background-color: #FFFFBB;
}
#tree-view a
{
display: block;
position: relative;
}
#tree-view a span.tooltip
{
position: absolute;
z-index: 100;
display: none;
}
#tree-view a:hover span.tooltip
{
/* positioning */
margin-left: 1em;
margin-top: 1em;
display: block;
position: absolute;
/*formatting*/
text-decoration: none;
background: #DDD;
border: 1px solid #BBB;
padding: 5px;
white-space: normal;
width: 300px;
color: black;
}
#tree-view .tooltip strong
{
display: block;
}
#tree-view .tooltip .tooltip-info
{
display: block;
}
如果从工具提示锚删除了position：relative标签,则工具提示在Firefox中会正确显示.但是,没有它,工具提示将无法在Internet Explorer中正确显示.@H_403_2@
谢谢您的帮助.@H_403_2@
最佳答案
