如何使下拉菜单出现在IE6的组合框? [英] How to make drop-down menu appear over a combobox in 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屋!