IE6 Select元素无法被div覆盖的bug解决办法

转载标签：ie6div解决办法列表框u.s.a 分类：CSS
在页面设计时，经常会使用div制作蒙版或模拟弹出窗口，但在IE6下，当div下方有下拉列表框select元素的时候，下拉列表框会划破div显示在div之上，不论z-index设为何值均会出现此问题，可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑，div 无法覆盖select,但是iframe 可以覆盖select，而div可以覆盖iframe，所以解决办法就是用Z轴高度更高的Iframe元素，包裹或覆盖住下拉列表框控件，使其回到正常的Z轴高度上来！


解决办法一：Iframe包裹select元素


<iframe style="z-index:1"><!-- 用iframe 解决此bug -->    
            <select name="country">                   
                 <option value="1">china</option>    
                <option value="2">japanese</option>    
                <option value="1">U.S.A</option>    
             </select>    
</iframe>   
解决办法二：以Iframe作为div的子元素，覆盖select元素

来源：(http://blog.sina.com.cn/s/blog_6283c54a0100fxp8.html) - IE6 Select元素无法被div覆盖的bug解决办法(转载)_笨鱼小宇_新浪博客
.T_iframe  
{  
    position: absolute;  
    width: 100%;      
    height: 100%;  
    z-index:-1;   
}  

<div> 
     <span>这里可以包含其他dom元素</span> 
     <iframe class="T_iframe" src="transparentBody.html"></iframe> 
</div> 

补充:在这里如果不加src属性,尽管IFRAME会把SELECT挡住,但是由于默认IFRAME为白色,会影响原来的DIV背景色,为此,我在这里加了一个transparentBody.html页面,并把body style="background-color:"的值设为和原来DIV背景色一致,这样就解决了默认白色背景色的问题.但不知是否有更好解决办法


     这样嵌入了iframe的div就不怕被select划破了，方法一使用比较简单，但是应用存在局限，不可能在所有的select元素外添加iframe。方法二有的放矢，在需要的div上面添加iframe，是常见的解决办法。