Question

我在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，但不幸的是，到目前为止，我尝试了不同的解决方案，没有任何成功。

提前致谢！

Answer 1

这是IE6中z-index错误的结果。选择元素具有高z-index，因此它们总是出现在其他元素的前面。

解决此问题的一种快捷方法是在菜单打开时隐藏选择。打开菜单时可以调用这样的函数：

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

Answer 2

这是一个IE6错误。

除了在鼠标悬停在下拉列表时设置组合框的CSS属性display: none;，并将其再次设置为可见时，除此之外没有办法解决此问题。

如何在IE6中的组合框上显示下拉菜单？

2 个答案: