查资料确定这是IE的一个Bug,在IE7.0及以上版本或者其它类型的浏览器上不存在该问题。解决的办法有三种:层浮动到select之上时隐藏select控件;用Object包装层;用iframe包装层。
其中,第一个方法有些笨,不是太好,而且也没有什么技术难点,不予讨论。第二个方法由于Object已不被HTML标准推荐,所以也搁下不谈。我采用了第三种解决办法。示例代码如下:
<
div
style
="float: left; margin: 0 10px;"
>
< div onclick ="document.all('cnt1').style.display='block'" onmouseleave ="document.all('cnt1').style.display='none';" >
Menu1 </ div >
< div id ="cnt1" style ="position: absolute; display: none; z-index: 20; width: 100px; background-color: Olive;" >
< iframe style ="position: absolute; z-index: -1; filter: alpha(opacity=0);" ></ iframe >
< a href ="#" > Link1 </ a >
< a href ="#" > Link2 </ a >
< a href ="#" > Link3 </ a >
</ div >
</ div >
< div style ="float: left; margin: 0 10px;" >
< div onclick ="document.all('cnt2').style.display='block'" onmouseleave ="document.all('cnt2').style.display='none';" >
Menu2 </ div >
< div id ="cnt2" style ="position: absolute; display: none; z-index: 20; width: 100px; background-color: Olive;" >
< iframe style ="position: absolute; z-index: -1; filter: alpha(opacity=0);" ></ iframe >
< a href ="#" > Link4 </ a >
< a href ="#" > Link5 </ a >
< a href ="#" > Link6 </ a >
</ div >
</ div >
< div style ="clear: both;" >
< select id ="Select3" style ="width: 120px;" >
< option > option1 </ option >
< option > option2 </ option >
< option > option3 </ option >
< option > option4 </ option >
</ select >
</ div >
< div onclick ="document.all('cnt1').style.display='block'" onmouseleave ="document.all('cnt1').style.display='none';" >
Menu1 </ div >
< div id ="cnt1" style ="position: absolute; display: none; z-index: 20; width: 100px; background-color: Olive;" >
< iframe style ="position: absolute; z-index: -1; filter: alpha(opacity=0);" ></ iframe >
< a href ="#" > Link1 </ a >
< a href ="#" > Link2 </ a >
< a href ="#" > Link3 </ a >
</ div >
</ div >
< div style ="float: left; margin: 0 10px;" >
< div onclick ="document.all('cnt2').style.display='block'" onmouseleave ="document.all('cnt2').style.display='none';" >
Menu2 </ div >
< div id ="cnt2" style ="position: absolute; display: none; z-index: 20; width: 100px; background-color: Olive;" >
< iframe style ="position: absolute; z-index: -1; filter: alpha(opacity=0);" ></ iframe >
< a href ="#" > Link4 </ a >
< a href ="#" > Link5 </ a >
< a href ="#" > Link6 </ a >
</ div >
</ div >
< div style ="clear: both;" >
< select id ="Select3" style ="width: 120px;" >
< option > option1 </ option >
< option > option2 </ option >
< option > option3 </ option >
< option > option4 </ option >
</ select >
</ div >
代码看起来很简单,就是嵌入一个iframe,可值得注意的是设置iframe的style,不知道为什么,如果你设置了某些看起来无关的CSS属性,就会使功能无效,比如设置width: 100% 就不行,设置width: 100px 却没问题。另外,iframe放在控件后面不行,放在前面却行。到现在也没明白为什么会这样,也不知道在别的情况下是不是又会不一样,我只是不断的试来试去才弄出来的,这就是为什么看起来简单,却花了我一天多的时间!