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

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

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

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

Другое решение - в 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> трюк хорошим решением, но я все еще ищу улучшения, такие как удаление этого уродливого бесполезного тега , ухудшающего доступность.

Ответов (10)

Решение

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

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

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

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

Павел

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

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

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

выбирает [я] .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";
    }
}

I do the same thing with select boxes and Flash.

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

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

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

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

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

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

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

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

пример:

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

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

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

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

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

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

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