Блог вебмастера

Сегодня столкнулся с такой проблемой. Необходимо было вывести слой поверх выпадающего списка (select). Разумеется, в нормальных браузерах все отображалось так как нужно. Но вот IE6 отличился и доказал, что у него свой взгляд на правильное отображение страницы.

Оказывается что select в IE6 не только плохо воспринимает CSS стили, но еще и ни чем не перекрывается и отображается поверх всех слоев! Не помогает даже z-index.

К счастью, решение проблемы нашлось довольно быстро. Для того чтобы скрыть select надо поверх него вывести iframe. Вот как это делается:

HTML

<select>
  <option>123</option>
</select>
<div id="layer">
  <iframe></iframe>
  <p>Слой с абсолютным позиционированием</p>
</div>

CSS

#layer {
  position:relative;
  top:10px; left:20px;
  width:150px; height:100px;
}
#layer iframe {
  position:absolute;
  width:150px; height:100px;
  border:none;
  z-index:-1;
  _filter:mask();
}
select { width:100px; }

filter:mask() позволяет скрыть iframe в IE. Такого же эффекта можно добиться с помощью filter:alpha(opacity=0). Для того чтобы iframe не перекрывал текст, ссылки и прочие элементы, мы задаем для него отрицательный z-index:-1. Можно также скрыть iframe для остальных браузеров через условные комментарии (для надежности).

Вот в принципе и все. Кстати, если знаете другое решение данной проблемы обязательно пишите в комменты.