如何解决ie6中select无法被div遮盖的bug-创新互联
这篇文章主要介绍如何解决ie6中select无法被div遮盖的bug,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司一直在为企业提供服务,多年的磨炼,使我们在创意设计,网络营销推广到技术研发拥有了开发经验。我们擅长倾听企业需求,挖掘用户对产品需求服务价值,为企业制作有用的创意设计体验。核心团队拥有超过10多年以上行业经验,涵盖创意,策化,开发等专业领域,公司涉及领域有基础互联网服务多线服务器托管、成都App定制开发、手机移动建站、网页设计、网络整合营销。使用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一定要设置为负数,不然遮盖不住.
以上是“如何解决ie6中select无法被div遮盖的bug”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享名称:如何解决ie6中select无法被div遮盖的bug-创新互联
本文来源:http://scyanting.com/article/dpgspp.html