Как решить проблему выбора перекрытия в IE6?

При использовании IE вы не можете поместить абсолютно позиционированный div над выбранным элементом ввода. Это потому, что элемент select считается объектом ActiveX и находится поверх каждого элемента HTML на странице.

Я уже видел, как люди скрывают выбор при открытии всплывающего div, что приводит к довольно плохому пользователю, когда элементы управления исчезают.

У FogBugz на самом деле было довольно умное решение (до версии v6) для каждого выбора в текстовые поля при отображении всплывающего окна. Это решило ошибку и обмануло глаз пользователя, но поведение не было совершенным.

Другое решение находится в FogBugz 6, где они больше не используют элемент select и перекодируют его везде.

Последнее решение, которое я использую в настоящее время, испортило механизм рендеринга IE и заставил его отображать абсолютно позиционированный <div> как элемент ActiveX, гарантируя, что он может жить над элементом select. Это достигается путем размещения невидимого <iframe> внутри <div> и стилизации его с помощью:

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

Есть ли у кого-то еще лучшее решение, чем этот?

EDIT: Цель этого вопроса настолько информативна, насколько это реальный вопрос. Я считаю, что трюк <iframe> является хорошим решением, но я все еще ищу улучшения, как удаление этого уродливого бесполезного тега, который ухудшает доступность.

Ответ 1

Я не знаю ничего лучше, чем iframe

Но мне приходит в голову, что это можно добавить в JS, ища пару переменных

IE 6
Высокий Z-индекс (вы, как правило, должны установить z-индекс, если вы плаваете над div)
Элемент box

Тогда a script, который ищет эти элементы и просто добавляет слой iframe, будет аккуратным решением

Пол

Ответ 2

Спасибо за решение iframe hack. Это уродливо и все же элегантно.:)

Просто комментарий. Если вы запускаете свой сайт через SSL, для фиктивного тега iframe должен быть указан src, иначе IE6 будет жаловаться на предупреждение о безопасности.

Пример:

    <iframe src="javascript:false;"></iframe>

Я видел, как некоторые люди рекомендуют устанавливать src в blank.html... но мне больше нравится javascript. Идите фигуру.

Ответ 3

Насколько я знаю, есть только два варианта, лучшим из которых является упомянутое использование iframe. Другой скрывает все выделения, когда отображается оверлей, что приводит к еще более странному опыту пользователя.

Ответ 4

попробуйте этот плагин http://docs.jquery.com/Plugins/bgiframe, он должен работать!

использование: $('.your-dropdown-menu').bgiframe();

Ответ 5

Я не думаю, что есть. Я пытался решить эту проблему на своей работе. Скрытие выбранного элемента управления было лучшим, что мы могли бы придумать (являясь корпоративным магазином с плененной аудиторией, пользовательский опыт обычно не влияет на решения PM).

Из того, что я мог бы собирать в Интернете при поиске решения, просто нет хорошего решения. Мне нравится решение FogBugz (то же самое делает множество громких сайтов, таких как Facebook), и на самом деле это то, что я использую в своих проектах.

Ответ 6

Я делаю то же самое с полями выбора и Flash.

При использовании наложения скройте скрытые объекты, которые будут проталкиваться. Это не здорово, но это работает. Вы можете использовать JavaScript, чтобы скрыть элементы перед отображением наложения, а затем показать их снова, как только вы закончите.

Я стараюсь не вмешиваться в iframe, если это абсолютно необходимо.

Трюк использования меток или текстовых полей вместо полей выбора во время оверлея является опрятным. Я могу использовать это в будущем.

Ответ 7

Mootools имеет довольно неплохое решение с использованием iframe, называемого iframeshim.

Не стоит включать lib только для этого, но если у вас есть это в вашем проекте, вы должны знать, что существует плагин iframeshim.

Ответ 8

Вот этот простой и простой плагин jquery под названием bgiframe. Разработчик создал его с единственной целью решения этой проблемы в ie6.

Я недавно использовал и работает как шарм.

Ответ 9

При скрытии элементов select их скрыть, установив "видимость: скрытый" вместо отображения: ни один другой браузер не будет повторно документировать документ.

Ответ 10

Я исправил это, скрыв компоненты select с помощью CSS, когда отображается диалог или наложение:

выбирает [i].style.visibility = "hidden";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}