Как решить проблему выбора перекрытия в 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;
}

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

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

11.08.2008 16:45:10
Это было исправлено в IE7. Поэтому я думаю, что реальный вопрос заключается в следующем: как мы можем заставить людей перейти с IE6 на IE7 +?
ScottKoon 16.08.2008 15:49:47
Вы можете изменить тег "internet-explorer" на тег "ie6"? это помогло бы уточнить, что это не проблема в IE7 или IE8.
scunliffe 23.09.2008 20:31:38
Иногда это невозможно. Один из наших клиентов заставляет нас поддерживать IE6 для своих сотрудников, которых они отказываются обновлять до IE7.
Dave Haynes 8.10.2008 17:44:56
Вы могли бы поступить так, как сделали многие из наших (норвежских) крупных сайтов, и просто объявить войну IE6. wired.com/epicenter/2009/02/norwegian-websi
Daniel Bruce 20.12.2009 10:02:22
10 ОТВЕТОВ
РЕШЕНИЕ

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

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

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

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

Павел

8
16.08.2008 16:06:35
правильно, это лучший способ, все оконные элементы управления в IE 5.5 и 6.0 имеют более высокий z-индекс, чем что-либо на странице, поэтому вы можете покрыть только один такой элемент управления другим. Iframe - лучший вариант, так как он может быть прозрачным. dotnetjunkies.com/WebLog/jking/archive/category/28.aspx
Vitaly Sharovatov 1.10.2008 12:19:32
и также могут быть проблемы с SRC iframe, пожалуйста, посмотрите здесь: weblogs.asp.net/bleroy/archive/2005/08/09/…
Vitaly Sharovatov 1.10.2008 12:24:00

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

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

0
11.08.2008 16:48:03

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

2
11.08.2008 17:00:44

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

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

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

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

0
11.08.2008 17:07:30

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

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

пример:

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

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

5
22.04.2009 21:41:18
@Vlad .. При использовании <iframe src="javascript:false;"></iframe>я получаю некоторые ошибки в IE, например, после POST на страницу IE говорит, что есть проблема с рассматриваемой страницей, и ничего не делает. С src пусто <iframe src=""></iframe>все обратно на работу.
user324541 27.05.2010 22:18:01
Вы имеете в виду «about: blank» вместо «blank.html»?
Tim Büthe 10.11.2011 11:03:38
В другом сообщении в блоге предлагается использовать этот атрибут: src = "javascript: '<html> </ html>';" чтобы избежать предупреждения HTTPS. ссылка на сообщение в блоге Кажется, работает нормально
Ken Pega 5.12.2012 02:17:06

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

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

0
20.12.2009 09:44:09

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

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

0
30.04.2010 15:48:10

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

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

1
30.11.2012 14:47:02

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

0
2.06.2011 13:58:21

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