IE6下Select元素被div等元素覆盖的解决办法
导读：收集整理的这篇文章主要介绍了IE6下Select元素被div等元素覆盖的解决办法，觉得挺不错的，现在分享给大家，也给大家做个参考。 可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑，div 无...
收集整理的这篇文章主要介绍了IE6下Select元素被div等元素覆盖的解决办法，觉得挺不错的，现在分享给大家，也给大家做个参考。 可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑，div 无法覆盖select,但是iframe 可以覆盖select，而div可以覆盖iframe，所以解决办法就是用Z轴高度更高的Iframe元素，包裹或覆盖住下拉列表框控件，使其回到正常的Z轴高度上来！ 解决办法一：Iframe包裹select元素
Code
复制代码代码如下:
iframe style="z-index:1" style="z-index:1"> !-- 用iframe 解决此bug -->
select name="country">
option value="1"> china/option>
option value="2"> japanese/option>
option value="1"> U.S.A/option>
/select>
/iframe>
解决办法二：以Iframe作为div的子元素，覆盖select元素
Code
复制代码代码如下:
.T_iframe
{
posITion: absolute; /*绝对定位保证iframe不会占用流布局空间*/
width: 100%; /*100%保证可以覆盖整个div*/
height: 100%;
z-index:-1; /*-1保证iframe显示在div下方*/
}
.T_div
{
position: absolute;
left:100px;
top:50px;
width: 300px;
height: 200px;
background : blue;
z-index:100;
}
div class="T_div">
span> 这里可以包含其他dom元素/span>
iframe class="T_iframe"> /iframe>
/div>
这样嵌入了iframe的div就不怕被select划破了，方法一使用比较简单，但是应用存在局限，不可能在所有的select元素外添加iframe。方法二有的放矢，在需要的div上面添加iframe，是常见的解决办法。
ASP.NET2.0的服务器端控件Menu菜单控件在IE6下渲染的时候，也遇到了select元素无法覆盖的问题，所以当加载了Menu菜单控件时，会自动注入一个脚本文件，用添加iframe元素的办法来处理这个bug，当菜单项比较多的时候，这个脚本处理会导致菜单加载时有明显的延迟，所以这个菜单控件还是不用为妙！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： IE6下Select元素被div等元素覆盖的解决办法
本文地址： https://pptw.com/jishu/584808.html