手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >IE6下Select元素被div等元素覆盖的解决办法
IE6下Select元素被div等元素覆盖的解决办法
摘要:可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑,div无法覆盖select,但是iframe可以覆盖...

可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴高度失控。但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的Z轴高度上来!

解决办法一:Iframe包裹select元素

Code

<iframe><>

<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>

<span>这里可以包含其他dom元素</span>

<iframe></iframe>

</div>

这样嵌入了iframe的div就不怕被select划破了,方法一使用比较简单,但是应用存在局限,不可能在所有的select元素外添加iframe。方法二有的放矢,在需要的div上面添加iframe,是常见的解决办法。

ASP.NET2.0的服务器端控件Menu菜单控件在IE6下渲染的时候,也遇到了select元素无法覆盖的问题,所以当加载了Menu菜单控件时,会自动注入一个脚本文件,用添加iframe元素的办法来处理这个bug,当菜单项比较多的时候,这个脚本处理会导致菜单加载时有明显的延迟,所以这个菜单控件还是不用为妙!

【IE6下Select元素被div等元素覆盖的解决办法】相关文章:

img图片元素下多余空白解决方案

CSS中文字体对应的英文写法

CSS教程:闭合CSS浮动元素的几种方法

DIV下图片自适应解决方法

div标签中的元素margin-top失效的解决方法

css中元素水平垂直居中4种方法介绍

ie placeholder属性的兼容性问题解决方法

css控制div不能居中的解决办法

css中替换元素和不可替换元素

chrome居中但ie不居中的解决方法

精品推荐
分类导航