注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

IE6环境下jquery.bgiframe.js下拉列表框被遮盖  

2013-01-24 18:58:38|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
IE6情况下,如果网页上下拉选单重叠时,会看到下拉选框总是把浮动区块div覆盖住。
bgiframe 插件解决 IE6 的问题
首先去jquery 官方网下载 jquery.bgiframe.js 然后在jsp页面引入 
Java代码 
  1. <script type='text/javascript' src='<%= request.getContextPath()%>/js/jquery.bgiframe.js'></script>  
  2. <script type="text/javascript">    
  3.   
  4.     $(function() {    
  5.   
  6.         $('#livemargins_contro').bgiframe();       
  7.   
  8.      });    
  9.   
  10.  </script>   


以下来自网络:

在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,是常见的解决办法。

  评论这张
 
阅读(374)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016