解决浮动层无法浮动在select控件之上的问题

    这些天做MOSS2007 的全局导航控件，遇到一个不大不小的问题，困扰了我一天多的时间。原来，在IE6.0 及以下版本，浮动的层遇到诸如select 之类的控件时，会无法浮动在这些控件的上层，即便使用z-index 也不管用。

    查资料确定这是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 >

    代码看起来很简单，就是嵌入一个iframe，可值得注意的是设置iframe的style，不知道为什么，如果你设置了某些看起来无关的CSS属性，就会使功能无效，比如设置width: 100% 就不行，设置width: 100px 却没问题。另外，iframe放在控件后面不行，放在前面却行。到现在也没明白为什么会这样，也不知道在别的情况下是不是又会不一样，我只是不断的试来试去才弄出来的，这就是为什么看起来简单，却花了我一天多的时间！

转载于:https://www.cnblogs.com/easyjacky/archive/2008/01/04/1025596.html