`
SnailWong
  • 浏览: 183516 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

解决IE中DIV无法遮盖SELECT的问题

    博客分类:
  • web
阅读更多
下拉框,即Html的SELECT元素,.net设计时的DropDownList,是HTML中的windowed  element,尤其ie6之后,几乎是唯一的windowed  element(还有popup等少量极少用的的)。  普通的元素,textbox,  div,  table……这些,属于windowless  element,它们之间互相遮盖的情况由z-index决定,在它们之上,是SELECT这些windowed  element。所以一般情况下div、table等不能遮盖select。这个问题广泛存在于各种弹出式控件的使用之中,比如日历控件等。如果要显示div,以前的做法是,动态的,在显示的时候,让div区域的select不可见,div消失的时候,再恢复这些select元素。这种做法比较奇怪,因为它严格上并不是“遮盖”了select,而是,让她整个消失了,如果calendar弹出元素只是应该遮盖select元素的一部分,但select却整个不见,用户也许会觉得奇怪;做起来也麻烦,要用js逐一判断各select的位置。 
ie5.5之后,有一个新的小技巧,称之为“iframe  shim”(iframe加塞:p),可以真正的“遮盖”select元素。它利用了一种特殊的元素:iframe。在ie5.5之前,iframe也是windowed  element,但从5.5开始,iframe就是普通的windowless  element了,可是,虽然是windowless  element,iframe却可以盖住select。这种做法的原理就是:放一个iframe与你要显示的东西(比如说一个div)同样大小、位置,并设置z-index使得iframe在此DIV之下;这样,iframe遮盖了select,同时,iframe又在要显示的div的下面,div就露出来了。 
限制:仅适用于ie5.5及以后版本。


简而言之,解决方法有三种:

    1.隐藏下拉框
    2.让用户使用IE7.0 或8.0
    3.加iframe来盖住。
分享到:
评论
1 楼 yanlp 2010-06-09  
jquery有个叫bgiframe的插件可以很方便的解决。

相关推荐

    select网页下拉列表与div层遮盖问题

    第一就是比较有名的:一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例: 注解:如果你在FirFox下和IE7下看都 在html中关于select元素的问题在很多地方都提出过,而在前段时间的项目中,刚好...

    解决DIV在IE下被下拉列表select穿透的问题(二)

    总的来说,解决IE浏览器中`<div>`被`<select>`穿透的问题,需要对浏览器的渲染机制有深入的理解,并灵活运用如`jquery.bgiframe`这样的工具。在不断发展的Web技术环境中,了解并掌握这类兼容性解决方案对于前端...

    ie6 select无法被div遮盖的bug解决方法

    通过以上步骤,我们可以成功地使用`<iframe>`作为遮罩层,解决IE6下`<select>`无法被`<div>`遮盖的问题。值得注意的是,虽然这个方法在IE6中有效,但它并不适用于其他现代浏览器,因为这些浏览器已经修复了这个问题...

    Jquery 解决IE6 Select 框总是在图层(div)的上面显示的BUG

    针对这个问题,jQuery提供了一种解决方案,通过创建一个透明的iframe来遮盖Select元素,从而达到让它“隐藏”在其他图层后面的效果。这种方法的基本思路是:当用户滚动或点击某个触发事件时,动态地插入一个透明的...

    Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div...

    DIV遮罩层如何实现

    4. 兼容性考虑:示例代码中特别提到了在IE6浏览器中,如果使用DIV元素作为遮罩层,可能会遇到无法遮挡<select>元素的问题,因此选择了使用元素作为遮罩层,以解决该兼容性问题。另外,还特别考虑了页面在无滚动条时...

    asp.net 页面版文本框智能提示JSCode (升级版)

    只需修改文本框onfocus=”fnStartInterval(this,’DropDownList2′)”, 设置好相应的参数即可,同时修复了在IE6下div无法遮盖下拉列表的问题,(IE6下无论如何设置select的z-index或div的z-index属性均无济于事),...

    html技巧代码

    7. **解决select覆盖div问题**: - 在div内添加一个`iframe`,设置其`z-index`低于div,用以遮挡select,防止select下拉列表遮盖div内容。 8. **跨域iframe**: - 注意跨域引用的问题,iframe的`src`属性必须指向...

    BAT,WEB前段面试宝典

    解决方法包括但不限于:双边距BUG可以通过display属性解决,PNG透明问题可以使用JavaScript代码更改,min-height可以通过添加important声明解决,以及select在IE6下遮盖问题可以通过iframe嵌套解决。 doctype声明的...

    Js的MessageBox效果代码

    例如,代码可能需要使用条件注释或者 feature detection 来处理 IE 特有的问题,比如 IE 中的 select 元素无法被其他元素遮盖。此外,代码指出在 Opera 中图层无法透明,这可能需要使用特定的 CSS 解决方案。 在...

    web前端面试题1

    10. **IE6常见BUG及解决方法**:包括双边距问题、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题、select遮盖问题,以及1像素宽度容器问题。 11. **title与alt属性**:`title`用于鼠标悬停...

    前端面试题大集合

    - Select在IE6下的遮盖问题:使用iframe嵌套。 - 宽度容器问题:使用`overflow: hidden`。 - **解决方法**:针对不同问题采取相应的解决方案。 #### 九、HTML的语义化 - **语义化**:使用合适的HTML标签来描述...

    史上最全前端面试题(含答案).docx

    10. **IE6常见问题及解决方法**:包括双边距BUG、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题以及select遮盖问题等,这些问题通常需要针对IE6的特性进行特殊处理。 11. **img标签的...

    最新史上最全前端面试题(含答案).docx

    10. **IE6常见BUG及解决方案**:双边距BUG、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题、select遮盖问题、1px宽度容器问题等,通过各种CSS技巧或JavaScript解决。 11. **标签title与...

    面试题库.docx

    10. **IE6 Bug解决方法**:双边距Bug、3像素问题、超链接hover失效、z-index问题、PNG透明、min-height、select遮盖等,需要针对性的CSS hack或JavaScript解决方案。 11. **title与alt属性**:`alt`属性为图片提供...

    javascript创建页面蒙板的一些知识技巧总结第1/3页

    使用`div`层作为蒙板时,可能会遇到无法覆盖`<select>`或`<object>`等问题。这是因为这些元素在某些浏览器中具有较高的优先级,可以通过以下几种方式解决: - **使用`iframe`遮盖`<select>`元素** 通过结合使用...

    超文标记语言

    - **select在IE6下的遮盖问题**:使用`iframe`嵌套可以解决。 - **无法定义1px宽度容器**:IE6默认的行高会导致1px宽度的问题,可以通过调整`overflow`属性来解决。 #### 十一、`<img>`标签上的`title`与`alt`属性 ...

    2016前端面试题及答案.pdf

    10. **IE6常见bug的解决方法**:双边距bug通过display属性解决,3像素问题使用display:inline,超链接hover失效需调整顺序,z-index问题给父级设置position,PNG透明问题用js,min-height使用!important,select遮盖...

Global site tag (gtag.js) - Google Analytics