Internet Explorer 中的绝对定位和滚动条答案

【问题标题】：Absolute positioning and scroll bar in Internet ExplorerInternet Explorer 中的绝对定位和滚动条
【发布时间】：2010-08-11 14:38:32
【问题描述】：

免责声明

这个问题是转贴。我最初问它here。虽然有一个人很好地帮助了我，但他最终找不到理想的解决方案。实际情况是 Doctype 没有 Stack Overflow 那样的大量用户。这对我来说是一个重要的问题，我真的需要更多的意见。

问题

我已经使用 HTML 和 CSS 实现了一个树形视图。当此树视图中的项目悬停时，其下方会出现一个工具提示。一切都在 Firefox 中运行良好，但在 Chrome 或 Firefox 中却不行。

我的问题是工具提示使用绝对定位来允许其内容显示在其他元素之上。当我在 Firefox 中滚动时，这些工具提示的位置会移动以反映它们的新位置。但是，Internet Explorer 保留元素的原始位置。因此，如果我将鼠标悬停在滚动的元素上，工具提示会显示在元素最初所在的位置下方。

我已经读到可以通过添加 position: relative to my tree view 来解决这个问题，但这会阻止工具提示悬停在整个页面上。

这里有一些示例代码来说明我的问题：

<!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：

#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 中正确显示。

感谢您的帮助。

【问题讨论】：

标签： html css tooltip

【解决方案1】：

不久前，我停止使用自己的工具提示并切换到 Qtip (http://craigsworks.com/projects/qtip/)。它经过跨浏览器测试，易于实例化，并且看起来非常出色。如果您碰巧是 ThemeRoller 用户，那么 beta 版本（在每晚构建中可用）完全支持 ThemeRoller 样式。总的来说，我强烈建议您考虑使用它来让生活变得轻松......它只是减少了脑损伤。

在即将发布的 JQuery UI 中，将有一个类似的功能内置到核心中。类似的脚本可用于 Dojo、Prototype 和 MooTools。

【讨论】：

这是一个非常好的库。我使用 CSS 的主要原因是，我们可以通过更多控制来格式化工具提示，同时仍然让网站可降解。但是，这个库的优点可能是值得的。谢谢。

【解决方案2】：

您发布的代码可以立即在 Firefox 中运行。 IE6 中不显示工具提示，奇怪的是，您可以通过为锚的悬停状态提供背景颜色来解决此问题...

#tree-view a
{
 background-color:#ff0000;
}

我猜它只需要布局，但通常的缩放：1；或位置：相对；效果不一样

您可以使用...修复滚动条

#tree-view
{
 overflow: display;
}

【讨论】：

这是关于 IE6 中背景颜色的一个很好的提示。我还没有机会安装虚拟机并在该浏览器中对其进行测试。至于树形视图溢出，不幸的是我不想显示除工具提示之外的任何其他溢出内容。