Как решить проблему перекрытия выбора в IE6?
-
08-06-2019 - |
Вопрос
При использовании 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, найдя пару переменных.
- ИЕ 6
- Высокий Z-индекс (вам, как правило, приходится устанавливать z-индекс, если вы перемещаете элемент div)
- Элемент коробки
Тогда скрипт, который ищет эти элементы и просто добавляет слой 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";
}
}