手机
当前位置:查字典教程网 >网页设计 >心得技巧 >ie6 select无法被div遮盖的bug解决方法
ie6 select无法被div遮盖的bug解决方法
摘要:使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论...

使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论z-index设为何值均会出现此问题,可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的Z轴高度上来!

html如下:

Html代码

<div id="acontainnerbox">

这里是很多代码,[url=www.k686.com]www.k686.com[/url]

<iframe frameborder="0"></iframe>

</div>

<div id="acontainnerbox">

这里是很多代码,[url=www.k686.com]www.k686.com[/url]

<iframe 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无法被div遮盖的bug解决方法】相关文章:

html自适应表格的方法

Sublime Text—设置浏览器快捷键的方法推荐

清除浮动的几种方法(推荐)

网页flash动画不显示的解决方法

网页访问速度的关键问题和解决方法

表单元素垂直居中完美解决方案

Web开发中盒子居中的几种方法

条件注释样式的编写方法及示例代码

网页FOUC问题导致网页混乱的解决方法

页面中防止缓存的解决方法

精品推荐
分类导航