解决浮动层无法浮动在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