Absolute positioning and scroll bar in Internet Explorer_问答_开发者

Disclaimer

This question is a repost. I originally asked it here. While there was one person who was kind enough to help me, he ultimately couldn't find an ideal solution. The reality of the situation is Doctype just doesn't have the huge number of users that Stack Overflow does. This is an important problem for me, and I really need more opinions on it.

The Problem

I've implemented a tree view using HTML and CSS. When an item in this tree view is hovered, a tooltip appears under it. Everything's works great in Firefox, but not in Chrome or Firefox.

My problem is the tooltip is using absolute positioning to allow its content to display over other elements. When I scroll in Firefox, the positioning of these tooltips moves to reflect their new locations. However, Internet Explorer retains the original position of the elements. Thus if I hover over a scrolled elements, the tooltip displays under wherever the element was originally located.

I've read this could be fixed by adding position: relative to my tree view, but this would prevent the tooltips from hovering over the entire page.

Here's some example code to illustrate my problem:

<!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>
    <开发者_JS百科;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>

And here's the CSS for the example:

#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;
}

If the position: relative tag is removed from the tooltip anchor, the tooltips display correctly in Firefox. However, without it the tooltips don't display correctly in Internet Explorer.

Thanks for the help.

I stopped using my own Tooltips and switched over to Qtip (http://craigsworks.com/projects/qtip/)a while back. It's cross-browser tested, simple to instantiate, and looks outstanding. If you happen to be a ThemeRoller user, the beta version (available in the nightly builds) fully supports ThemeRoller styling. Overall, I'd highly recommend considering it to make life easy....it's just less brain-damage.

In the upcoming release of JQuery UI, there will be a similar feature built into the core. Similar scripts are available for Dojo, Prototype, and MooTools.

The code you posted works straight away in Firefox. The tooltips don't show up in IE6, rather strangely you can fix this by giving the hover state of the anchor a background color...

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

I guess it just needs to have layout but the usual zoom:1; or position:relative; don't have the same effect

You can remedy the scroll bars by using...

#tree-view
{
 overflow: display;
}

Absolute positioning and scroll bar in Internet Explorer

精彩评论

关注公众号

热门标签

图文推荐

Absolute positioning and scroll bar in Internet Explorer

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：