如何使下拉菜单出现在IE6的组合框? [英] How to make drop-down menu appear over a combobox in IE6?

查看:98
本文介绍了如何使下拉菜单出现在IE6的组合框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在IE6中遇到问题:

I'm facing a problem in IE6 :

我的网站包含一个下拉菜单,一些页面包含组合框。
当我推出一个菜单,它覆盖了一个组合框,组合框总是出现在菜单上!

My website contains a drop-down menu and some pages contains comboboxes. When I roll-out a menu and it's covering a combobox, the combobox always appears over the menu !

我的网站专门用于IE6,所以我想在IE6上解决这个问题,并使下拉菜单在这种情况下唤醒OVER的组合框。

My website is to be used exclusively on IE6, so I want to solve this problem on IE6 and make the drop-down menu apprear OVER the combobox in such situations.

这里是一个代码片段说明问题: / p>

Here is a code snippet that illustrates the problem :

<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,但不幸的是,我尝试了不同的解决方案没有任何成功。

I know this problem has already been reported and it's because of IE6 but unfortunately, I tried different solutions so far without any success.

提前感谢!

推荐答案

是IE6中的z-index错误的结果。选择元素被赋予一个高z-index,所以它们总是出现在其他元素的前面。

This is the result of a z-index bug in IE6. Select elements are given a high z-index, so they always appear in front of other elements.

一个快速的方法来解决这个问题是隐藏的选择,当你的菜单打开。当你打开菜单时,你可以调用这样的函数:

A quick way to fix this is to hide the select when your menu is open. You can call a function like this when you open the menu:

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

这篇关于如何使下拉菜单出现在IE6的组合框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆