ie6 select无法被div遮盖的bug解决方法
发布时间：2011-07-29 17:24:54 作者：佚名 
我要评论
我要评论使用div制作蒙版或模拟弹出窗口，但在IE6下，当div下方有下拉列表框select元素的时候，下拉列表框会划破div显示在div之上，不论z-index设为何值均会出现此问题，可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑，div 无法覆盖sele
使用div制作蒙版或模拟弹出窗口，但在IE6下，当div下方有下拉列表框select元素的时候，下拉列表框会划破div显示在div之上，不论z-index设为何值均会出现此问题，可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑，div 无法覆盖select,但是iframe 可以覆盖select，而div可以覆盖iframe，所以解决办法就是用Z轴高度更高的Iframe元素，包裹或覆盖住下拉列表框控件，使其回到正常的Z轴高度上来！
html如下:
Html代码
<div id="acontainnerbox" class="aboxinitcss">
这里是很多代码,[url=www.k686.com]www.k686.com[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>
<div id="acontainnerbox" class="aboxinitcss">
这里是很多代码,[url=www.k686.com]www.k686.com[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>
css代码如下:
Html代码
.aboxinitcss{
position:absolute;
margin-top:0px;
margin-left:0px;
display:none;
background:#FFF;
border:solid #CCC 1px;
padding:30px;
z-index:9999;
width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}
.aboxinitcss{
position:absolute;
margin-top:0px;
margin-left:0px;
display:none;
background:#FFF;
border:solid #CCC 1px;
padding:30px;
z-index:9999;
width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}
即可解决这个bug.
iframe的z-index一定要设置为负数,不然遮盖不住.
html如下:
Html代码
复制代码
代码如下:<div id="acontainnerbox" class="aboxinitcss">
这里是很多代码,[url=www.k686.com]www.k686.com[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>
复制代码
代码如下:<div id="acontainnerbox" class="aboxinitcss">
这里是很多代码,[url=www.k686.com]www.k686.com[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>
css代码如下:
Html代码
复制代码
代码如下:.aboxinitcss{
position:absolute;
margin-top:0px;
margin-left:0px;
display:none;
background:#FFF;
border:solid #CCC 1px;
padding:30px;
z-index:9999;
width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}
.aboxinitcss{
position:absolute;
margin-top:0px;
margin-left:0px;
display:none;
background:#FFF;
border:solid #CCC 1px;
padding:30px;
z-index:9999;
width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}
即可解决这个bug.
iframe的z-index一定要设置为负数,不然遮盖不住.
相关文章
- IE6下层被select控件遮住的问题想必大家在布局过程中都有遇到过吧，其实解决方法很简单就是在层里套个iframe，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-19
- 使用embed来内嵌视频，因为视频是windows media player，上面想用div浮动一些内容，最后设定了windowlessVideo=1终于解决，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-07
- 浮层遮挡情况想必大家在测试网页布局师会有遇到过吧，如果浮层中的元素覆盖的区域含有设置了postion:relative的元素，在IE7中浮层就有可能无法遮挡这些元素，下面是具体的2013-05-07
- 今天有任务让加个蒙版，JS小白的我在网上找了个修改下，改成了JS模版以后可以重复用啦,本文将详细介绍DIV遮罩层如何实现，需要的 朋友可以参考下2012-11-20
- 巧用CSS3 border实现图片遮罩效果代码，需要的朋友可以参考下2012-04-09
- 背景半透明，覆盖整个可视区域的遮罩层效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现2011-12-08
- 背景半透明，覆盖整个可视区域的遮罩层效果在工作中经常会遇到，这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现2011-10-30
- 用到遮罩弹窗时在网上搜索，看到绝大多数都是基于Jquery的。我不想用那么复杂的应用，于是自己写了一个。2011-07-27
- 在进行网页布局设计的时候，经常会根据需要设置相对定位，绝对以及浮动定位最近突然发现了一个奇妙的现象：IE6下绝对定位元素神秘消失或被遮挡, 首先是IE绝对定位元素神秘2011-07-22
- css 遮罩样式（支持IE和FireFox） ，需要的朋友可以参考下。2011-01-27
最新评论