IE6情况下使用jquery.bgiframe.js插件解决下拉列表框被遮盖BUG

IE6情况下，如果网页上下拉选单重叠时，会看到下拉选框总是把浮动区块div覆盖住，bgiframe 插件解决IE6 的这个

bug.
首先去jquery 官方网下载 jquery.bgiframe.js ,然后在jsp页面引入 <script type="text/javascript" src="scripts/jquery.bgiframe.js"></script>

 或者<script type='text/javascript' src='<%= request.getContextPath()%>/scripts/jquery.bgiframe.js'></script>

 

<script type="text/javascript"> 

 

     $(document).ready(function() { 
         $('#dialog').bgiframe();                   //dialog是浮动区块div的id.
      });

 

</SCRIPT>

或者

<script type="text/javascript"> 

       $(function() {     

              $('#dialog'').bgiframe();        

        });     

</SCRIPT>

*******************************************************

使用的是Jquery UI dialog的时候，可以利用UI dialog的属性达到这个目的。(这个方法更简单)

 $(document).ready(function(){ 
  $('#dialog').dialog({
     autoOpen: false,                 
     height:600,
     width: 900,
     bgiframe: true ,          //解决下拉框遮盖div的bug
     resizable: false,         //dialog的大小不可以改变
     draggable:false         //dialog不可以拖动
  });
 });

*******************************************************

在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" 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元素
.T_iframe  
{  
    position: absolute;/*绝对定位保证iframe不会占用流布局空间*/  
    width: 100%;    /*100%保证可以覆盖整个div*/  
    height: 100%;  
    z-index:-1; /*-1保证iframe显示在div下方*/  
}  
.T_div  
{  
    position: absolute;  
    left:100px;  
    top:50px;  
    width: 300px;  
    height: 200px;  
    background : blue;    
    z-index:100;  
}  
<div class="T_div"> 
     <span>这里可以包含其他dom元素</span> 
     <iframe class="T_iframe"></iframe> 
</div> 

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