HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Скрываем select в ие6

Есть такой баг в ие6. Элеменет select всегда находится поверх всех слоев. И никакие position-ы c z-index-ами не помогут. Эта проблема особо мешает, когда нужно поверх select-а расположить какой-либо слой, например это может выпадать меню, или это может быть какое-либо модальное окно. Есть 2 пути решения этой проблемы (если знаете еще, пишите в комментариях).

Итак, суть бага состоит в следуещем. Пусть есть такой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.box {
	position:absolute;
	left:0;
	top:0;
	width:100px;
	height:100px;
	border:1px solid #333;
	background:#CCC;
}
</style>
</head>
<body>
<select>
  <option>Категория номер 1</option>
  <option>Категория номер 2</option>
  <option>Категория номер 3</option>
  <option>Категория номер 4</option>
  <option>Категория номер 5</option>
  <option>Категория номер 6</option>
  <option>Категория номер 7</option>
</select>
<div class="box"> Я модальное окошко </div>
</body>
</html>

В нормальных браузерах див с классом box будет перекрывать селект, но вот в ие6 будет наоборот, select будет поверх этого дива:

Баг в ie6. select всегда поверх всех блоков

А теперь 2 способа как решить эту проблему.

Скрываем все select-ы с помощью java script

Первый способ, по-моему, наиболее простой, можно скрывать все селекты с помощью js. Например, если перекрыть селект нужно модальным окном, то при вызове этого модального окна, вызываем функцию скрывания селектов, которая проходит по всему документу и всем select-ам ставит visibility:hidden, а при закрывании окна, ставит обратно visibility:visible. Данную функцию не сложно написать, особенно с помощью jquery это пишется в несколько строк. Но минус такого способа, что будет наблюдаться появление и пропадание select-а (но, думаю, пользователи шестого ие уже привыкли, что сайты у них как-то странно глючат :) )

Делаем подложку iframe

Этот способ сложнее предыдущего, но в итоге пользователь не увидит никаких изменений на сайте. Как вы догадались из названия, нужно сделать подложку из iframe. Т.е. мы под div с классом box ставим iframe такого же размера, и этот iframe, перекроет select, а сам div перекроет фрейм и в итоге мы получим решение задачи:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.box {
	position:absolute;
	z-index:2;
	left:0;
	top:0;
	width:100px;
	height:100px;
	border:1px solid #333;
	background:#CCC;
}
.boxFrame {
	position:absolute;
	z-index:1;
	left:0;
	top:0;
	width:102px;
	height:102px;
}
</style>
</head>
<body>
<select>
  <option>Категория номер 1</option>
  <option>Категория номер 2</option>
  <option>Категория номер 3</option>
  <option>Категория номер 4</option>
  <option>Категория номер 5</option>
  <option>Категория номер 6</option>
  <option>Категория номер 7</option>
</select>
<iframe src="box.html" class="boxFrame"></iframe>
<div class="box"> Я модальное окошко </div>
</body>
</html>

И в итоге, в ие6 наблюдается нормальная картинка, селект находится под дивом:

профиксили баг с select-ом в ие6

Также можно размеры фрейма и его вызов оставить на ява скрипт, написав соответствующие функции, что сделает html код вообще обычным, как и в нормальных браузерах.

UPD: Появилась мысль. А если не угадывать размеры фрейма, а поставить ему ширину и высоту всего документа и сделать его прозрачным, т.е. получится как бы маска, может прокатит? ;)

Метки: , ,

Запись опубликована 18.09.2009 в 18:26 и размещена в рубрике css, html. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (2) на “Скрываем select в ие6”

  • is5201:
    29.10.2009 в 10:33

    Скрытие селекта или его перекрытие фреймом можно использовать только тогда, когда селект перекрывается полностью.

    Если селект перекрывается не полностью, можно использовать сл. методы:
    * Можно на время появления меню заменять селекты рисунками (правда если содержимое селектов берётся из базы, которая постоянно обновляется, рисунки отпадают).
    * Можно содержимое контейнера (который перекрывает селект) помещать в попап, создаваемый методом window.createPopup().

  • zubovd:
    21.12.2011 в 17:35

    Обалденный у вас сайт! могу выложить ссылочку на своем Портале игр

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос