`

解决IE6中 Div层挡不住Select组件

阅读更多

/**
 * 通过使用Ifram,解决div层挡不住Select组件的问题(通常该问出出现IE6浏览器中)

 *  (如果需要源代码请下载附件)
 *
 * @Author  JiangShui
 * @Date 2010-10-18
 */
 
 1、依赖组件:依赖于Jquery的核心组件jquery.js。
 
 2、解决的问题:解决div层挡不住Select组件的问题(通常该问出出现IE6浏览器中)。
     
 3、使用方法:①、在要使用的页面(.jsp或者.html)中首先导入Jquery的核心组件库jquery.js。(如果不使用Jquery
     组件,你必须修改js文件中的部分代码:
     1、获取浏览器类型和版本号的代码$.browser.msie && $.browser.version=='6.0'
     2、在指定id的容器中追加html代码:$("#"+parentDivId).append(iframeHtml);
     3、从html文档中移除指定id的html组件:$("#iframeDivUsedForCoverSelect").remove();
     如果你对html的文档模型比较熟悉,修改以上代码应该不是很困难)。
       ②、导入该js文件中的两个方法。
      
  注意:1、在层弹出之前调用方法:openIframeDiv(parentDivId);(parentDivId为select组件所在的容器div的id)
    2、在关闭弹出的层之后调用方法:removeIframe();

 

 

 

 

 

/**
 * 通过使用Ifram,解决div层挡不住Select组件的问题(通常该问出出现IE6浏览器中)
 *
 * @Author JiangShui
 *
 * @Date 2010-10-19
 */

 

/**
  * 如果当前的浏览器是IE6,则打开一个iframe层,用于遮挡select组件,
  * 本组件用于解决IE6中,div层挡不住select组件的bug
  *
  * @param parentDivId  iframe所依赖的父窗口div层的id,要遮挡的select组件
  *       便在该div中(如果select组件不在一个div中,请放入一个div中
  *       并定义一个id作为该参数的值)
  *       
  */


 function openIframeDiv(parentDivId) {
  if($.browser.msie && $.browser.version=='6.0'){
  var iframeHtml = '<iframe id="iframeDivUsedForCoverSelect" scrolling="auto" width="100%" height="100%" '
       + 'frameborder="0" framespacing="0" style="filter:alpha(opacity:0);'
       + 'opacity:0;left:0px;top:0px;position:absolute;z-index:1;"></iframe>';
   $("#"+parentDivId).append(iframeHtml);
 }
 }
 
 /**
  * 移除iframe层,与方法openIframeDiv(parentDivId)配对使用
  *
  *
  */
 function removeIframe() {
  //获取以前的查询窗口对象
 var searchObj = document.getElementById("iframeDivUsedForCoverSelect");
 //如果对应id的组件已经存在则将其删除
 if (null != searchObj && typeof(searchObj) != "undefined") {
  $("#iframeDivUsedForCoverSelect").remove();
 }
 }

分享到:
评论

相关推荐

    解决IE6 中select 穿透 div 等层的问题

    这个IFrame可以解决IE6中的z-index问题,使元素能够正确地遮挡住`&lt;select&gt;`。使用bgiframe时,需要引入jQuery库和bgiframe插件,并调用相应的方法将插件应用到目标元素上。 2. 创建透明IFrame:不依赖jQuery的情况...

    IE6下div层被select控件遮住的问题解决方法

    总结来说,面对IE6中的`div`层被`select`控件遮住的问题,我们可以利用`iframe`作为遮罩,并通过设置`z-index`和动态调整`iframe`尺寸的方法来解决。虽然这个方法在现代浏览器中可能不再适用,但对于仍然需要支持IE6...

    ie6下DIV覆盖select框js解决代码

    在IE6浏览器中,由于其自身的布局特性,当一个`div`元素试图覆盖一个`select`下拉框时,会遇到一些棘手的问题。这个问题主要体现在`select`元素总是会出现在`div`之上,无论`div`的`z-index`设置得多高。这在网页...

    IE6下 Jquery EasyUI 弹出窗口层无法挡住select 组件 解决方案

    本文将详细探讨一个特定的问题,即在Internet Explorer 6(IE6)环境下,使用JQuery EasyUI时,弹出窗口(对话框)无法正确遮挡页面上的select组件,以及如何解决这一问题。 JQuery EasyUI是一个基于jQuery的UI库,...

    解决 Ie 6下 select挡住div的通用函数

    /** * 让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底 * * @param string divId 需要解决的div层 * @param string iframeId 采用的 IFRAME ,如果不指定 自动...

    ie6下select覆盖div的解决办法

    在IE6浏览器中,由于其独特的布局模型,经常会出现Select元素覆盖Div元素的情况,这个问题让很多前端开发者头疼。本文将详细解析这个问题的原因,并提供多种有效的解决办法。 首先,我们需要了解问题的根本原因。在...

    ie6下select遮挡div

    这个插件,可能是名为“bgiframe”的插件(从压缩包子文件的文件名推断),被设计用来解决IE6下select遮挡div的问题。bgiframe插件会在被遮挡的元素上创建一个背景iframe,通过这种方式,即使在select控件存在的情况...

    IE6中列表挡住div的解决

    "IE6中列表挡住div的解决"这个话题正是关于此类问题的一个经典实例。Internet Explorer 6(简称IE6)是微软公司早期推出的浏览器版本,因其独特的渲染引擎,经常会给开发者带来不少头疼的问题。在本文中,我们将深入...

    Div 制作的SELECT

    用DIV模仿SELECT下拉框 function replaceSelects() { try{ for (i=0;i;i++){ // 隐藏 select selects[i].style.display = 'none'; select_divTag = document.createElement('div'); select_divTag.id = ...

    用div+jq高仿ie6的select表单随内容增加-2012-11-1

    用div+jq高仿ie6的select表单随内容增加 进行了一个升级,将其做成一个类似插件的形式; 在html中,依旧是应用传统的select进行布局,只需要给select一个class为toDiv,就可以动态的将select替换为已经设置好了的div...

    Div实现仿SelectDemo

    6. **样式定制**:使用CSS,我们可以完全控制仿Select组件的外观,包括字体、颜色、边框、过渡效果等。这使得组件能够无缝融入现有的网站设计。 总结来说,“Div实现仿SelectDemo”是一个使用jQuery实现的Select...

    div+css select效果

    在网页设计中,`div` 和 `css` 是两种核心的技术,用于构建和美化页面布局。`div` 是一个HTML(超文本标记语言)...在实际项目中,开发者可以根据具体需求进行调整和优化,创造出符合品牌风格的自定义`select`组件。

    解决div总是被select遮挡的问题.rar

    在本案例中,"解决div总是被select遮挡的问题.rar"提供了解决方案,通过引入一个透明的`iframe`来规避这一现象。 首先,我们需要理解Z轴顺序的概念。在CSS中,`z-index`属性用于指定元素在堆叠上下文中的层级。具有...

    div错位解决IE6、IE7、IE8样式不兼容问题IE6里DIV错位的问题.doc

    本文档主要关注在IE6、IE7、IE8中遇到的一个典型问题——**DIV错位**,并提供了解决方案。 #### 二、DIV错位现象分析 在文档中提到,采用`float: left;`样式的DIV在IE8和IE7中表现正常,但是在IE6中会出现向下偏移...

    div错位解决IE6IE7IE8样式不兼容问题

    ### div错位解决IE6/IE7/IE8样式不兼容问题 在Web开发中,兼容性一直是开发者面临的重要挑战之一。特别是在早期浏览器版本中,如Internet Explorer 6(IE6)、IE7 和 IE8,由于这些浏览器对于CSS的支持存在较大差异...

    DIV+select美化支持IE6 IE7 火狐(门户搜索)觉得兼容

    标题中的“DIV+select美化支持IE6 IE7 火狐(门户搜索)觉得兼容”指的是一项网页设计技术,主要是针对HTML中的`&lt;div&gt;`元素和`&lt;select&gt;`下拉菜单进行美化,并确保在不同浏览器,特别是老旧的Internet Explorer(IE6...

    IE6等div 100%高度填满解决办法

    通过以上分析可以看出,该方案能够很好地解决IE6等浏览器中`div`元素100%高度填充的问题。尽管现代Web开发已经很少使用IE6,但了解这些技术细节对于理解Web布局的历史发展以及兼容性问题仍然具有重要意义。

    让div浮动在select之上的完美解决方案!多浏览器兼容

    在网页设计中,有时我们需要使一个`div`元素覆盖或浮动在`select`元素之上,以便实现特定的交互效果,如弹出层、提示信息或者自定义下拉菜单等。然而,由于浏览器之间的渲染差异,这往往成为一个挑战。本文将探讨...

Global site tag (gtag.js) - Google Analytics