作家
登录

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

作者: 来源:www.28hudong.com 2012-11-19 14:17:11 阅读 我要评论

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

  推荐阅读

  网页设计中的文字的大小的搭配的方法 小文字,大体验

  随着ipad等移动终端的崛起,人们在移动终端阅读上的时间越来越多,阅读体验已经变得越来越重要。而字体又是决定阅读体验的关键所在,那么字体在哪些方面又是什么影响着阅读体验的成败?  1.是否具有高辨识度>>>详细阅读


本文标题:ie6 select无法被div遮盖的bug解决方法

地址:http://www.17bianji.com/kaifa/yejie/16072.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)