`
vvnet
  • 浏览: 116558 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

DIV SELECT IE 遮盖

    博客分类:
  • HTML
 
阅读更多
经测试解决代码仅在IE浏览器有效。

由于层与下拉框之间的优先级是:下拉框 > 层,因此在显示的时候,会因为优先级的次序而会出现div层被select下拉框遮盖的问题。(如果几个元素都是层的话,我们可以通过层的 z-index 属性来设置)解决办法就是:给层中放一个优先级比下拉框更高的元素(iframe),从而解决此问题!具体解决代码如下:

<div style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">

<iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
</div>
分享到:
评论

相关推荐

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

    这个问题涉及到HTML中的`&lt;div&gt;`元素和`&lt;select&gt;`下拉列表之间的交互,具体表现为在Internet Explorer(特别是旧版本)中,`&lt;select&gt;`元素可能会穿透(z-index问题)或者遮盖住上方的`&lt;div&gt;`元素。 `&lt;div&gt;`元素是...

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

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

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

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

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

    本文将深入探讨如何利用jQuery解决一个特定的问题:在IE6下,Select元素总是显示在具有较高z-index的图层(如div)之上。 首先,我们要理解z-index的概念。在CSS中,z-index是一个用于控制元素在垂直方向(即Z轴)...

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

    可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: ...

    DIV遮罩层如何实现

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

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

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

    html技巧代码

    - 在div内添加一个`iframe`,设置其`z-index`低于div,用以遮挡select,防止select下拉列表遮盖div内容。 8. **跨域iframe**: - 注意跨域引用的问题,iframe的`src`属性必须指向同源策略允许的地址,否则可能...

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

    通过结合使用`iframe`和`div`的方式,可以有效地遮盖`&lt;select&gt;`元素。通常情况下,`div`的`z-index`值应高于`iframe`的`z-index`值。 - **使用JavaScript隐藏`&lt;select&gt;`元素** 在创建蒙板的同时,可以通过...

    BAT,WEB前段面试宝典

    对于旧版浏览器IE6存在一些已知的BUG,解决方法包括但不限于:双边距BUG可以通过display属性解决,PNG透明问题可以使用JavaScript代码更改,min-height可以通过添加important声明解决,以及select在IE6下遮盖问题...

    面试题库.docx

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

    2016前端面试题及答案.pdf

    important,select遮盖用iframe。 11. **title与alt属性**:title提供鼠标悬停时显示的提示信息,alt是图片无法显示时替代文本。 12. **CSS Reset的作用**:重置浏览器默认样式,消除不同浏览器间的样式差异,使...

    用JavaScript实现仿Windows关机效果

    对于IE浏览器的一个特殊问题,`&lt;select&gt;`元素不能被覆盖层遮盖。为了解决这个问题,我们需要在用户触发关机效果时,使用JavaScript将所有`&lt;select&gt;`元素的可见性设为隐藏。 客户端的JavaScript代码通常包括两个部分...

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

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

    前端面试题大集合

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

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

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

    web前端面试题1

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

    Js的MessageBox效果代码

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

Global site tag (gtag.js) - Google Analytics