zoukankan      html  css  js  c++  java
  • IE6使用jquery.bgiframe.js解决select元素不会正常隐藏的BUG

    使用插件方式

    IE6情况下,select元素默认是顶级元素,很多应该被挡住的时候,偏偏显示在前端。一般是用嵌套一个iframe来解决。
    使用jquery.bgiframe.js更加简单。
    把这个插件导入jsp之后,直接$('#divIp'').bgiframe(); 就行了。

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

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

     $(document).ready(function(){ 
      $('#dialog').dialog({
         autoOpen: false,                
         height:600,
         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不会占用流布局空间*/  
        100%;    /*100%保证可以覆盖整个div*/  
        height: 100%;  
        z-index:-1; /*-1保证iframe显示在div下方*/  
    }  
    .T_div  
    {  
        position: absolute;  
        left:100px;  
        top:50px;  
        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,是常见的解决办法。

  • 相关阅读:
    网页快捷键
    2016年5月3日15:55:23笔记
    【编程的乐趣-用python解算法谜题系列】谜题一 保持一致
    重温离散系列②之良序原理
    重温离散系列①之什么是证明
    浅谈栈和队列
    [leetcode]16-最接近的三数之和
    [leetcode] 4-寻找两个有序数组的中位数
    英语句子的基本结构【转】
    [leetcode] 11-盛最多水的容器
  • 原文地址:https://www.cnblogs.com/onlywujun/p/2807601.html
Copyright © 2011-2022 走看看