Абсолютное позиционирование и полоса прокрутки в Internet Explorer - PullRequest
Новая
       0

Абсолютное позиционирование и полоса прокрутки в Internet Explorer

3 голосов
/ 11 августа 2010

Отказ от ответственности

Этот вопрос является перепостом.Я изначально спросил это здесь .Хотя был один человек, который был достаточно любезен, чтобы помочь мне, он в конечном итоге не смог найти идеального решения.Реальность ситуации в том, что у 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: относительный тег удаляется из привязки всплывающей подсказки, подсказки отображаются корректно в Firefox.Однако без него всплывающие подсказки не отображаются правильно в Internet Explorer.

Спасибо за помощь.

Ответы [ 2 ]

2 голосов
/ 11 августа 2010

Я перестал использовать свои собственные всплывающие подсказки и переключился на Qtip (http://craigsworks.com/projects/qtip/)a, когда возвращался. Он проверен на разных браузерах, прост в создании и выглядит выдающимся. Если вы оказались пользователем ThemeRoller, бета-версия(доступно в ночных сборках) полностью поддерживает стиль ThemeRoller. В целом, я очень рекомендую рассмотреть его, чтобы упростить жизнь ... это просто меньше повреждает мозг.

В следующем выпуске JQuery UI,аналогичная функция будет встроена в ядро. Подобные скрипты доступны для Dojo, Prototype и MooTools.

1 голос
/ 11 августа 2010

Код, который вы разместили, сразу работает в Firefox.Всплывающие подсказки не отображаются в IE6, довольно странно, что вы можете это исправить, задав для наведения состояния привязки цвет фона ... 

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

Я думаю, что для этого требуется только макет, но обычноувеличение: 1;или положение: относительное;не имеют того же эффекта

Вы можете исправить полосы прокрутки, используя ... 

#tree-view
{
 overflow: display;
}
...