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,当菜单项比较多的时候,这个脚本处理会导致菜单加载时有明显的延迟,所以这个菜单控件还是不用为妙!

以上就是IE6下Select元素被div等元素覆盖的如何解决办法。曾经赤脚跋涉过的人,才知珍惜鞋子。经过困境,才知珍惜平淡的生活。更多关于IE6下Select元素被div等元素覆盖的如何解决办法请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例