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

ОтказАбсолютное позиционирование и полоса прокрутки в 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; 
}

Если позиция: относительная метка удаляется из всплывающей якоря, в подсказках правильно отображаться в Firefox. Однако без него всплывающие подсказки отображаются неправильно в Internet Explorer.

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

источник

2010-08-11 LandonSchropp

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

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

источник

2010-08-11 19:23:00 bpeterson76

Это действительно хорошая библиотека. Моим основным аргументом в пользу использования CSS было то, что мы могли форматировать всплывающие подсказки с большим контролем, оставаясь при этом разлагающимся. Тем не менее, преимущества этой библиотеки могут стоить того. Благодарю. – LandonSchropp

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

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

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

Вы можете устранить полосы прокрутки с помощью ...

#tree-view 
{ 
overflow: display; 
}

источник

2010-08-11 15:25:17 michael

Это хороший совет о цвете фона в IE6. У меня не было возможности установить виртуальную машину и проверить ее в этом браузере.Что касается переполнения древовидной структуры, то, к сожалению, я не хочу отображать любое другое содержимое переполнения, кроме всплывающих подсказок. – LandonSchropp

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

ответ

Смежные вопросы