手机
当前位置:查字典教程网 >网页设计 >心得技巧 >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解决方法】相关文章:

ie8,chrome中table的宽度固定方法

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

用Dreamweaver8对网站文件进行检查整理的方法

z-index为负值的元素无法点击到的解决方法

wap页面之iphone设备字体偏大问题解决方法

Web2.0:信息过载的原因和解决方法

网页可读性提高的几个方法

li行间距大(IE中多了5个像素)的解决方法

FlashFXP ftp客户端软件的注册破解方法

CSS中浏览器对尺寸和宽高解释差异的解决方法

精品推荐
分类导航