主页 / 建站知识 /

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

建站知识 2021-07-03 09:08www.168986.cn长沙网站建设
使用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=.k686.].k686.[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>


复制代码
代码如下:

<div id="acontainnerbox" class="aboxinitcss">
这里是很多代码,[url=.k686.].k686.[/url]
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>


css代码如下:
Html代码

复制代码
代码如下:

.aboxinitcss{
position:absolute;
margin-: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;
:0;
}
.aboxinitcss{
position:absolute;
margin-: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;
:0;
}

即可解决这个bug.
iframe的z-index一定要设置为负数,不然遮盖不住.
上一篇：css自动截取指定长度字符串，结尾显示... 支持 下一篇：如何解决IE6/7绝对定位元素神秘消失或被遮挡的方

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by