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

Question

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

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

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

С чего начать поиск решения проблемы?

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

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

Answer 1

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

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

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

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

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

Answer 2

Джереми,

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

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

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

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

С уважением, Эрик

Answer 3

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

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

Но в документации говорится, что это имеет значение в версиях 5.5 < IE < 7, так что это может быть не та проблема, с которой вы столкнулись.Итак, еще раз, не до конца понимая, с какой установкой вы работаете, вы также можете попробовать поэкспериментировать с различными z-индекс значения для поля автозаполнения и окружающих элементов уровня блока.

Answer 4

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

Answer 5

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