如何使下拉菜单出现在IE6的组合框中？

问题描述：

我的网站包含一个下拉菜单，一些页面包含组合框。当我展开一个菜单并覆盖组合框时，组合框总会出现在菜单上！

我的网站是专门用于IE6的，所以我想在IE6上解决这个问题，并在这种情况下下载菜单apprear OVER组合框。

下面的代码片段说明该问题：

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

在此先感谢！

我敢肯定有解决此之外，没有其他办法比移动组合框的页面的不同部分，所以它不是这样。 – lazycs 2011-05-17 16:54:17

高度相关：http://stackoverflow.com/questions/224471/iframe-shimming-or-ie6-and-below-select-z-index-bug - 接受的答案包含整齐的隐藏/显示代码，并有一个链接以一个好的iframe修补程序修复另一个答案。 – thirtydot 2011-05-17 17:43:58

答

这是一个IE6的错误。

除了设置组合框的CSS属性display: none;时，没有办法绕过它，而将鼠标悬停在下拉列表上，否则将其设置为可见。

答

这是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

如何使下拉菜单出现在IE6的组合框中？

相关推荐