html-Internet Explorer中的绝对定位和滚动条

免责声明

这个问题是转贴.我最初的要求是here.虽然有一个人足够友好地帮助我,但他最终找不到理想的解决方案.这种情况的现实是Doctype只是没有Stack Overflow拥有的大量用户.这对我来说是一个重要的问题,我真的需要更多意见.

问题

我已经使用HTML和CSS实现了树形视图.将鼠标悬停在此树形视图中的项目时,其下方会出现一个工具提示.一切在Firefox中都可以正常运行,但在Chrome或Firefox中却不能.

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

我已经读过,可以通过添加位置来解决此问题：相对于我的树形视图,但这可以防止工具提示悬停在整个页面上.

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

<!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中正确显示.

谢谢您的帮助.

最佳答案

我回来时不再使用自己的工具提示,而是切换到Qtip(http://craigsworks.com/projects/qtip/)a.它经过跨浏览器测试,易于实例化,并且外观出色.如果您恰好是ThemeRoller用户,则beta版(在夜间版本中可用)完全支持ThemeRoller样式.总的来说,我强烈建议您考虑一下它,以使生活变得轻松…

在即将发布的JQuery UI版本中,核心中将内置类似的功能.类似的脚本可用于Dojo,Prototype和MooTools.

html-Internet Explorer中的绝对定位和滚动条

猜你在找的CSS相关文章