(<select> + слои) + IE = Кошмар!

ragnaar · №1

Сегодня заканчивая (практически) сайт, решил посмотреть его в IE... И увидел кошмар! На сайте используется выпадающее DHTML меню. К меню претензий нет, оно использует слои для своей выпадающей части (как и все подобные меню), но беда в том, что прямо под меню оказался выпадающий список(элемент <select>) и в IE, меню выпадает под этот выпадающий список! Зрелище не для слабонервных. В Fx все в порядке. Истощив запас матерных выражений в адрес создателей этого недобраузера начал эксперементировать, но до сих пор ничего не вышло...
Вот, быстренько слабал демо-страничку этого ужаса

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>test</title>
	<style>
	div{
	  width: 100;
	  height: 100;
	  background-color: blue;
	  position: absolute;
	  z-index: 1;
	}
	
	select{
	  width: 100px;
	  background-color: green;
	  position: absolute;
	  z-index: 0;
	  left: 20;
	}
	
	input{
	  width: 100;
	  position: absolute;
	  z-index: 0;
          top: 30;
	  left: 20;
	}
	
	</style>
</head>

<body>
<div>&nbsp;</div>

<select name=1>
  <option>one</option>
  <option>two</option>
</select>
<input type=text>

</body>
</html>

<input> введен для демонстрации нормального поведения. Посмотрите в IE и Fx... Может у кого есть идеи как решить эту проблему? Менять что-то на сайте уже поздно, да и жаль нескольких месяцев работы...

LattyF · №2

А у меня вообще везде (опера, фокс, осел) глючит Везде синий квадрат, а под ним меню и поле ввода. Или так должно быть?

ragnaar · №3

Да, синий квадрат (эмуляция меню) должна быть поверх всех полей (<select> и <input>). В IE он под выпадающим списком и над текстовым полем...

Bananas · №4

:::: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4

Lynn · №5

ragnaar
Это ж баян ещё тот. В IE select сдеан окном и поэтому всегда находится поверх любых элементов. (кроме iframe, кажется). В грядущем IE7 баг полечен.

ragnaar · №6

Bananas
Ну да, я просто для <option> правило не прописал...
Lynn

В грядущем IE7 баг полечен.

Но сейчас мне от этого не легче...

Anton · №7

Наверное, я был неоригинален, набрав в строке поиска google строку "z-index in ie"

В найденном мною, в качестве решения предлагается закрывать <select> элементом <iframe>. То есть, для приведенного ragnaar'ом кода надо сделать такие изменения:

Выделить код

Код:

...
    div{
      ...
      z-index: 3;
    }

    #ifr{
    top: 0;
    left: 0;
      width: 100;
      height: 100;
      position: absolute;
      z-index: 2;
    }
...
<body>
<div id="div1">&nbsp;</div>
<iframe id="ifr" frameborder="no"></iframe>
...

Это работает в IE и Firefox, но не работает в Opera.

Я попробовал сделать так, чтобы <iframe> был только в IE. Для этого требуются такие изменения:

Выделить код

Код:

...
    div{
      ...
      z-index: 3;
    }

    select{
      ...
      behavior: url(ragdht.htc);
    }
...
<body>
<div id="div1">&nbsp;</div>
...

и дополнительный файл ragdht.htc:

Выделить код

Код:

<?xml version="1.0"?>

<public:component xmlns:public="urn:HTMLComponent" lightweight="true">

    <public:attach event="ondocumentready" handler="myfunc2"/>

    <script type="text/javascript">
        //<![CDATA[

        function myfunc2 ()
        {
            var fr = element. document. createElement ("iframe");
            var x = element. document. all ("div1");
            fr. style. width = x. clientWidth;
            fr. style. height = x. clientHeight;
            fr. style. left = x. offsetLeft;
            fr. style. top = x. offsetTop;
            fr. style. zIndex = 2;
            fr. style. position = "absolute";
            fr. scrolling = "no";
            fr. frameBorder = 0;
            fr. width = "100%";
            fr. height = "100%";
            element. document. body. appendChild (fr);
            element. document. recalc ();
        }

        //]]>
    </script>

</public:component>

Это работает в IE, Firefox и Opera, элемент <iframe> вставляется в структуру документа только в IE. Правда, IE будет ругаться на активное содержимое.

ragnaar · №8

Хм, про трюк с Iframe я тоже читал... Я пробовал - у меня не прокатило. Попробую твой вариант. Спасибо.

vladmir · №9

ragnaar

Но сейчас мне от этого не легче...

С ИЕ самое забавное не то, что он сейчас что-то не поддерживает в последней версии, а то, что существенная часть пользователей сидят на старых версиях и нужно оптимизировать и под старьё. То ли дело моззилловцы и оперовцы.

ragnaar · №10

vladmir
Для себя я уже решил, что после выхода ИЕ7 на неподдержку фич в 6 я забиваю... Кто не может без ИЕ - установит 7, остальные(пользователи W2K например) пусть юзают фокса или оперу... Хватит заниматься трюкачеством, пора писать по стандартам...

Al_H · №11

ragnaar
Интересный подход. Однако, кто кому больше нужен, Вы посетителям, или посетители Вам? У IE7 есть несколько особенностей, сильно затрудняющих или даже делающих невозможной установку на многие машины.

ragnaar · №12

Al_H

У IE7 есть несколько особенностей, сильно затрудняющих или даже делающих невозможной установку на многие машины.

Поэтому я и написал

остальные(пользователи W2K например) пусть юзают фокса или оперу...

Вообще, это тема для флейма, тем более что там ее уже поднимали...

Al_H · №13

Все-таки жалко, что в Ёксплорерах, включая 6 и 7, со стандартами так плохо. Это на руку Файрфоксу и Опере, равно как и Сафари, но делает Веб скучнее и менее красивым, и по разработчикам бьет. В некоторых случаях обход багов увеличивает таблицу стилей на 30-40%.

Полезная информация

№119-09-2005 19:58:22