这些天做MOSS2007的全局导航控件，遇到一个不大不小的问题，困扰了我一天多的时间。原来，在IE6.0及以下版本，浮动的层遇到诸如select之类的控件时，会无法浮动在这些控件的上层，即便使用z-index也不管用。
<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>
查资料确定这是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放在控件后面不行，放在前面却行。到现在也没明白为什么会这样，也不知道在别的情况下是不是又会不一样，我只是不断的试来试去才弄出来的，这就是为什么看起来简单，却花了我一天多的时间！
