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代码 复制代码 收藏代码
  1. <div id="acontainnerbox" class="aboxinitcss">  
  2. 这里是很多代码,[url=www.k686.com]www.k686.com[/url]       
  3. <iframe class="ifhideselect" frameborder="0"></iframe>  
  4. </div>  


css代码如下:
Html代码 复制代码 收藏代码
  1. .aboxinitcss{   
  2.     position:absolute;   
  3.     margin-top:0px;   
  4.     margin-left:0px;   
  5.     display:none;   
  6.     background:#FFF;   
  7.     border:solid #CCC 1px;   
  8.     padding:30px;   
  9.     z-index:9999;   
  10.     width:620px;overflow:hidden;   
  11. }   
  12. .ifhideselect{   
  13. z-index:-1;   
  14. width:680px;   
  15. height:255px;   
  16. position:absolute;   
  17. border:0;   
  18. left:0;   
  19. top:0;   
  20. }  


即可解决这个bug.
iframe的z-index一定要设置为负数,不然遮盖不住.
posted @ 2011-07-29 12:28  子萧  阅读(817)  评论(0编辑  收藏  举报