webew
Войти » Регистрация
 
HTML

Перекрывание селектов в IE6

11 мая 2008, 21:19

Даже через абсолютно спозиционированные ДИВ-ы с максимальным zIndex-ом в ИЕ6 "проглядывают" селекты. Задача: подобрать HTML/CSS-способы перекрывания селектов.

Реализация селектов в браузере Internet Explorer 6 такова, что перекрыть их обычными блочными элементами (ДИВ-ы, таблицы) даже при максимальном zIndex-е у последних не получится. Выглядит этот эффект вот так (у ДИВа z-index:10000):

Экспериментальным путем было выявлено, что единственный элемент, перекрывающий селекты в ИЕ6 - это iframe. При грамотном подборе стилей, его можно привести к виду, неотличимому от обычного ДИВа:

У такого способа есть свои плюсы:
+ проблема решается силами HTML/CSS и верстка кроссбраузерна;
+ iframe-у даже не нужно задавать zIndex, он и так перекрывает селект;

и минусы:
- border всё-таки "съедается" селектом, что хорошо заметно на рисунке ↑;
- iframe при своем вызове засоряет хистори браузера;
- чтобы заполнить iframe контентом, требуется отдельная страница. Однако, эта особенность поправима с помощью JavaScript.

Замечания

1) Flash-объекты также не перекрывают селекты в IE6.
2) Существуют JavaScript-фикс для перекрываемости селектов в ИЕ6, однако, его использование имеет свои минусы и подойдет не для всякого случая. Будьте внимательны при его использовании.

© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
NO USERPIC

Bezz

Да, я часто встречался с этой проблемой. В большенстве случаев приходилось организовывать селекты при помощи JS. Использование iframe'ов, я думаю, не является хорошим сособом, но в некоторых случаях действительно может помочь.
24.06.2008, 13:11
Ответить

bur

Способ опробованный, кроме описанных в статье минусов проблем не возникало.

JS-селекты тоже выход, но это решение не всегда подойдет с дизайнерской точки зрения, т.к. во всех браузерах и платформах они будут выглядеть одинаково, отличаясь от дефолтного вида элементов форм.
24.06.2008, 13:25
Ответить
NO USERPIC

Bezz

Согласен, что если селект находиться, допустим, в форме регистрации, то в Сафаре, или в Опере он будет неприятно выделяться на фоне текстбоксов. В таких случаях приходиться подгонять уже текстбоксы под вид селектов.

Правда, часто бывает так, что заказчик хочет полностью стилизировать контролы под дизайн сайта, тогда без JS для селектов не обойтись (
24.06.2008, 13:35
Ответить
NO USERPIC

NamelessOne

Чтобы и бордер не "съедался" и iframe контентом наполнять не приходилось делается достаточно просто.

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

Примерно так
25.06.2008, 10:57
Ответить

bur

Для решения задачи с бордером достаточно будет прописать в стилях документа ифрейма:
html, body {width:100%; height:100%;}
body {border:1px solid #000}


25.06.2008, 12:21
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: