繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > IE6下Select元素被div等元素覆盖的解决办法
- CSS样式表
- 分页显示之超级提速版
- 兼容多浏览器实现半透明(Opera ie firefox)
- 解析IE, FireFox, Opera 浏览器支持Alpha透明的方法
- utf8和unicode编码究竟是什么关系？有何区别?
- XHTML下css+div布局总结 超强推荐
- 在IE下拖动滚动条时border消失的解决方法
- CSS中常用的单位
- 有关表格边框的css语法整理(1)
- 中文排版CSS心得
- 一个针对IE7的CSS Hack
- css也疯狂! 用background 插入flash播放器
- 如何解决下拉菜单被flash覆盖的问题
- 网页中关闭IE的图像工具栏和XP主题
- 解决IE升级后Flash线框问题
- em px的关系
- 在iframe中隐藏横向滚动条的方法大全
- Iframe自适应其加载的内容高度
- 固定右栏宽度, 左栏内容先出现同时自适应宽度的布局
- IE Bug--浮动对象外补丁的双倍距离的解决方法
- 解决IE7以下版本不支持无A状态伪类的几种方法
CSS样式表 中的 IE6下Select元素被div等元素覆盖的解决办法
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 264 ::
收藏到网摘: n/a
可能由于下拉列表控件的弹出式下拉列表的原因导致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，当菜单项比较多的时候，这个脚本处理会导致菜单加载时有明显的延迟，所以这个菜单控件还是不用为妙！
评论 (0) All
