今天小编跟大家讲解下有关ie6 select无法被div遮盖的bug解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关ie6 select无法被div遮盖的bug解决方法 的相关资料,希望小伙伴们看了有所帮助。
使用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一定要设置为负数,不然遮盖不住.来源:爱蒂网