ie6 select无法被div遮盖的bug解决
使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论z-index设为何值均会出现此问题,可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的Z轴高度上来!
html如下:
css代码如下:
即可解决这个bug.
iframe的z-index一定要设置为负数,不然遮盖不住.
html如下:
- <div id="acontainnerbox" class="aboxinitcss">
- 这里是很多代码,[url=www.k686.com]www.k686.com[/url]
- <iframe class="ifhideselect" frameborder="0"></iframe>
- </div>
css代码如下:
- .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一定要设置为负数,不然遮盖不住.