Как сделать так, чтобы выпадающее меню отображалось над списком в IE6? - PullRequest
Новая
       28

Как сделать так, чтобы выпадающее меню отображалось над списком в IE6?

0 голосов
/ 17 мая 2011

У меня проблема в IE6:

Мой веб-сайт содержит раскрывающееся меню, а некоторые страницы содержат списки. Когда я развертываю меню и оно покрывает комбинированный список, этот список всегда появляется над меню!

Мой веб-сайт должен использоваться исключительно в IE6, поэтому я хочу решить эту проблему в IE6 и в таких ситуациях раскрывающееся меню появиться над списком.

Вот фрагмент кода, который иллюстрирует проблему: 

<html>
<body>
<!-- Menu -->
<table width="20%" border="0" style="position:relative; z-index:100;">
    <tr>
        <td colspan="0">

            <table  style="background-color: #40668C; color: white; z-index:100;" width="100%">
                <tr>
                    <td>Agenda</td>
                </tr>

                <tr>
                    <td>
                        <table 
                            align="right" 
                            valign="top" 
                            width="100%" 
                            height="100%" 
                            style=" visibility: visible; 
                                    position: absolute; 
                                    background-color: #40668C;  
                                    color: white; 
                                    top: 21px; 
                                    z-index:100;">

                            <tr><td>Personnal</td></tr>
                            <tr><td>Group</td></tr>
                            <tr><td>Day</td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- Combobox -->
<form style="z-index: 0;">

    <TABLE style="z-index: 0;">

        <TR style="z-index: 0;">
            <TD style="z-index: 0;">
                <TABLE style="z-index: 0;">
                    <TR style="z-index: 0;">
                        <TD>Combobox :</TD>
                        <TD style="z-index: 0;">
                            <SELECT style="z-index: 0;">
                                <OPTION></option>
                                <OPTION>Element 1</option>
                                <OPTION>Element 2</option>
                            </select>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</form>

</body> 
</html>

Я знаю, что об этой проблеме уже сообщалось, и это из-за IE6, но, к сожалению, я безуспешно пробовал разные решения.

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 17 мая 2011

Это результат ошибки z-index в IE6.Элементам выбора присвоен высокий z-индекс, поэтому они всегда отображаются перед другими элементами.

Быстрый способ исправить это - скрыть выбор, когда ваше меню открыто.Вы можете вызвать такую ​​функцию при открытии меню: 

function hide_select(myelement){  
    var select = document.getElementById('myelement');  
    if(select.style.visibility == "hidden")  
    {  
        select.style.visibility="visible"  
    }else{  
        select.style.visibility="hidden";  
    }  
}

Ссылка: http://www.tinyqueen.com/web-site-design/ie6-select-z-index-bug-a-workaround

0 голосов
/ 17 мая 2011

Это ошибка IE6.

Нет другого пути, кроме как установить атрибут CSS комбо-бокса display: none; при наведении курсора на выпадающий список и установить его снова видимым, в противном случае.

...