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

Question

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

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

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;
}

У кого-нибудь есть лучшее решение, чем это?

РЕДАКТИРОВАТЬ: Цель этого вопроса столь же информативным, как и реальный вопрос. Я считаю трюк <iframe> хорошим решением, но я все еще ищу улучшения, такие как удаление этого ужасного бесполезного тега , который ухудшает доступность.

Answer 1

Я не знаю ничего лучше, чем Ифраме

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

1. IE 6
2. Высокий Z-индекс (вам, как правило, приходится устанавливать z-индекс, если вы используете плавающий делитель)
3. Элемент коробки

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

Пол

Answer 2

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

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

пример:

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

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

Answer 3

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

Answer 4

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

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

Answer 5

Я исправил это, скрыв компоненты выбора с помощью 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";
    }
}

Answer 6

При скрытии выбранных элементов скрывайте их, задав вместо параметра «видимость: скрытый»: нет, в противном случае браузер будет перенаправлять документ.

Answer 7

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

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

Answer 8

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

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

Answer 9

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

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

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

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

Answer 10

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

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