YUI Autocomplete отображает под другими элементами страницы в IE7

Question

Сейчас я работаю над страницей, в которой есть столбец с полями, стилизованными под сексуальные тени и углы, и тому подобное, используя пример здесь . Должен признать, я не до конца понимаю, как работает этот CSS, но он выглядит замечательно.

Внутри самого верхнего поля находится текстовый ввод, используемый для поиска. Это окно поиска подключено к виджету YUI autocomplete .

Все отлично работает в Firefox3 на Mac, FF2 на Windows, Safari на Mac. В IE7 в WinXP предложения автозаполнения отображаются под прямоугольниками с закругленными углами, что делает нечитаемыми все, кроме первого (хотя вы все еще можете видеть достаточно заглядывания между блоками, что я чувствую, что IE7 действительно получает более одного предложения). 1011 *

Где я могу начать искать, чтобы исправить проблему?

Вот как выглядит успех в FF2 на WinXP:

А вот как выглядит сбой в IE7:

Answer 1

Джереми,

Извините за опоздание, но, надеюсь, ответ будет полезен вам в будущем проекте.

Проблема здесь в том, что IE создает новый порядок наложения каждый раз, когда появляется элемент с позицией: относительный, что означает, что сам z-индекс не является единственным контролирующим фактором. Вы можете прочитать больше об этом здесь:

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Чтобы решить проблему, если я правильно понимаю вашу проблему, примените положение: относительно контейнера, который оборачивает всю реализацию автозаполнения (а затем положение: абсолютное значение для вашего контейнера результатов). Это должно создать независимый порядок наложения в IE для тех элементов, который позволяет им плавать над другой позицией: относительными стеками, которые появляются позже на странице.

С уважением, Eric

Answer 2

Рабочее решение, которое я наконец реализовал, основывалось на прочтении этого объяснения снова и снова.

В базовом HTML все элементы с закругленными углами синего цвета - это DIV, и все они являются братьями и сестрами (все потомки одного и того же DIV).

z-индекс самого элемента autocomplete div (который является пра-пра-внуком элемента div контейнера с закругленными углами) может быть произвольно высоким, и это не решит эту проблему, поскольку IE по сути отображал все содержимое поля поиска ниже всего содержимого поля "Vital Stats", поскольку оба имели z-index по умолчанию, а Vital Stats был позже в HTML.

Хитрость заключалась в том, чтобы дать каждому из этих одноуровневых DIVs (контейнеры с закругленными углами синего цвета) z-индексы по убыванию и отметить их все положение: относительное. Таким образом, синий div, содержащий поле поиска, - это z-index: 60, поле «Vital Stats» - это z-index: 50, «Tags» - это z-index: 40 и т. Д.

Итак, в общем, найдите общего предка как перекрывающегося элемента, так и перекрывающегося элемента. Для непосредственных потомков общего предка примените z-индексы в том порядке, в котором вы хотите, чтобы контент отображался.

Answer 3

У меня была похожая проблема, я исправил ее, просто изменив z-index для разных элементов div. Просто установите большее число для каждого div в том порядке, в котором оно должно отображаться.

Answer 4

Убедитесь, что z-индекс автозаполнения div больше, чем div, составляющие прямоугольник с закругленными углами. Я полагаю, что Microsoft устанавливает z-индекс верхних элементов на 20000 или 100000. Может быть, стоит поступить так же.

Answer 5

Я не полностью , понимая настройки, которые приводят к проблеме, но вы можете изучить свойство useIFrame объекта автозаполнения YUI - он размещает объект iframe под полем автозаполнения, которое позволяет полю перемещаться над объектами, скрывающими его в ошибочном макете IE.

http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame

Но в документах говорится, что это важно в 5.5 z-index для поля автозаполнения и окружающих элементов уровня блока.