ie6 select无法被div遮盖的bug解决方法 -电脑资料

电脑资料 时间:2019-01-01 我要投稿
【www.unjs.com - 电脑资料】

    使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论z-index设为何值均会出现此问题,可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控,

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

。但是IE6有一个神奇的逻辑,div 无法覆盖sele

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

    html如下:

    Html代码

    复制代码

代码如下:

   

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

   

   

    复制代码

代码如下:

   

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

   

   

    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一定要设置为负数,不然遮盖不住.

最新文章