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

StackOverflow https://stackoverflow.com/questions/7937

Вопрос

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

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

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

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

Последнее решение, которое я сейчас использую, — это испортить движок рендеринга IE и заставить его отображать абсолютно позиционированные объекты. <div> как элемент ActiveX, гарантируя, что он может находиться поверх выбранного элемента.Это достигается за счет размещения невидимого <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> трюк, чтобы быть хорошим решением, но я все еще ищу улучшения, например удаление этого ужасный бесполезный тег это ухудшает доступность.

Это было полезно?

Решение

Я не знаю ничего лучше Iframe

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

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

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

Павел

Другие советы

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

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

пример:

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

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

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

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

Применение: $('.your-dropdown-menu').bgiframe();

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

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

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

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

Я стараюсь не связываться с iframe без крайней необходимости.

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

У Mootools есть довольно продуманное решение с использованием iframe, которое называется iframeshim.

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

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

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

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

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

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

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";
    }
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top