Как бороться с «просвечивающим» SELECT'ом в IE

Проблема

Стандартный select, оказавшись под непрозрачным дивом остается полностью виден в IE. Из-за этой его особенности, выпадающие меню, всплывающие окошки и прочие элементы, связанные с позиционированием дивов могут выглядеть крайне неаккуратно.

Решения

Есть несколько способов решения этой проблемы. Перечислю их от простого к сложному:

1. прячем select
2. iframe поверх select'а
3. собственные select'ы



Подробнее

1. прячем select
Самое простое решение — поставить селектам (всем или пересекающимся с дивом) css свойство visibility: hidden;
Разумеется искать все селекты и ставить каждому из них свойство не нужно. Достаточно определить css класс:
.noselect select { visibility: hidden; }

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

2. iframe поверх select'а
Пожалуй самое интересное решение. По совершенно непонятной для меня причине селекты в ИЕ не «пробиваются» сквозь iframe.
Т.е. если сначала разместить iframe а поверх него div — селекты будут вести себя, как во всех порядочных браузерах.
К сожалению это решение не подходит для полупрозрачных дивов. (UPD: спасибо beartamer и vithar)

3. собственные select'ы
Нет селектов — нет проблемы. Т.е. вместо селектов можно использовать их имитацию.
Есть готовые скрипты, которые «на лету» заменяют все селекты на их аналог основанный на всплывающих дивах. Разумеется при этом наша проблема будет решена.
Однако есть пара замечаний. Во-первых далеко не все скрипты обеспечивают полную функциональность при имитации селектов. Во-вторых селекты будут иметь нестандартный вид, а это не всегда идет на пользу.

Если вам известны другие рецепты — буду очень за них признателен.

оригинал в ЖЖ