首页 > 代码库 > IE6下解决select层级高的问题
IE6下解决select层级高的问题
div在IE6下无法遮盖select,原因是在IE6下,浏览器将select元素视为窗口级元素,这时div或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的。
解决方法有三种:
1:当浮动层div出现的时候,用JS将select隐藏,当浮动层div消失的时候select恢复出现。
2.可以用ul,li等进行模拟一个select的元素
3. 利用iframe的方式进行。
下面讲讲第三种最常用的的方式:
注意:生成的iframe是添加到要遮盖select的元素上。 其实相当于iframe作为它的背景存在。
<iframe frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>
当然可以用JS动态的创建,当识别的为IE6的时候
function createIframe(){//为兼容IE6创建框架
var myIframe = document.createElement(‘iframe‘);
myIframe.src = ‘about:blank‘;
myIframe.style.position = ‘absolute‘;
myIframe.style.zIndex = -1;
myIframe.style.left = ‘-1px‘;
myIframe.style.top = 0;
myIframe.style.border = 0;
myIframe.style.filter = ‘alpha(opacity= 0)‘;
myIframe.style.width = ‘250px‘;
myIframe.style.height = ‘250px‘;
return myIframe;
}
再添加到需要遮盖select的元素上面。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。