解决IE中DIV无法遮盖SELECT的问题
来源：互联网 发布：淘宝金币怎么充值 编辑：程序博客网 时间：2024/05/17 03:15
解决IE中DIV无法遮盖SELECT的问题
下拉框，即Html的SELECT元素，.net设计时的DropDownList，是HTML中的windowed element，尤其ie6之后，几乎是唯一的windowed element（还有popup等少量极少用的的）。 普通的元素，textbox, div, table……这些，属于windowless element，它们之间互相遮盖的情况由z-index决定，在它们之上，是SELECT这些windowed element。所以一般情况下div、table等不能遮盖select。这个问题广泛存在于各种弹出式控件的使用之中，比如日历控件等。如果要显示div，以前的做法是，动态的，在显示的时候，让div区域的select不可见，div消失的时候，再恢复这些select元素。这种做法比较奇怪，因为它严格上并不是“遮盖”了select，而是，让她整个消失了，如果calendar弹出元素只是应该遮盖select元素的一部分，但select却整个不见，用户也许会觉得奇怪；做起来也麻烦，要用js逐一判断各select的位置。
ie5.5之后，有一个新的小技巧，称之为“iframe shim”（iframe加塞:p），可以真正的“遮盖”select元素。它利用了一种特殊的元素：iframe。在ie5.5之前，iframe也是windowed element，但从5.5开始，iframe就是普通的windowless element了，可是，虽然是windowless element，iframe却可以盖住select。这种做法的原理就是：放一个iframe与你要显示的东西（比如说一个div）同样大小、位置，并设置z-index使得iframe在此DIV之下；这样，iframe遮盖了select，同时，iframe又在要显示的div的下面，div就露出来了。
限制：仅适用于ie5.5及以后版本。
简而言之，解决方法有三种：
1.隐藏下拉框
2.让用户使用IE7.0 或8.0
3.加iframe来盖住。
ie5.5之后，有一个新的小技巧，称之为“iframe shim”（iframe加塞:p），可以真正的“遮盖”select元素。它利用了一种特殊的元素：iframe。在ie5.5之前，iframe也是windowed element，但从5.5开始，iframe就是普通的windowless element了，可是，虽然是windowless element，iframe却可以盖住select。这种做法的原理就是：放一个iframe与你要显示的东西（比如说一个div）同样大小、位置，并设置z-index使得iframe在此DIV之下；这样，iframe遮盖了select，同时，iframe又在要显示的div的下面，div就露出来了。
限制：仅适用于ie5.5及以后版本。
简而言之，解决方法有三种：
1.隐藏下拉框
2.让用户使用IE7.0 或8.0
3.加iframe来盖住。
代码范例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>详解IE中select组件（下拉框）总是浮在其它元素上方的问题</title>
<style type="text/css">
.box{ width:200px; height:200px; position:absolute; top:0px; left:30px;}
.content{ width:200px; height:200px; border:3px solid blue; position:absolute; top:0px; left:0px; z-index:1;}
.iframebox{ width:200px; height:200px; position:absolute; top:0px; left:0px; z-index:-1;}
</style>
</head>
<body><br />
<select><option>我是下拉框，我默认总是在最上层。</option></select>
<div class="box">
<div class="content">我是蓝色边框div中的内容我是蓝色边框div中的内容我是蓝色边框div中的内容我是蓝色边框div中的内容</div>
<div class="iframebox"><iframe frameborder="0" style=" background-color:#FFCC33;" height="206px" width="206px"> </div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>详解IE中select组件（下拉框）总是浮在其它元素上方的问题</title>
<style type="text/css">
.box{ width:200px; height:200px; position:absolute; top:0px; left:30px;}
.content{ width:200px; height:200px; border:3px solid blue; position:absolute; top:0px; left:0px; z-index:1;}
.iframebox{ width:200px; height:200px; position:absolute; top:0px; left:0px; z-index:-1;}
</style>
</head>
<body><br />
<select><option>我是下拉框，我默认总是在最上层。</option></select>
<div class="box">
<div class="content">我是蓝色边框div中的内容我是蓝色边框div中的内容我是蓝色边框div中的内容我是蓝色边框div中的内容</div>
<div class="iframebox"><iframe frameborder="0" style=" background-color:#FFCC33;" height="206px" width="206px"> </div>
</div>
</body>
</html>
- 解决IE中DIV无法遮盖SELECT的问题
- ie6 select无法被div遮盖的bug解决
- 解决IE6 select无法被div遮盖的bug
- 解决div层被select下拉框遮盖的问题
- IE6 select穿透问题(div 定位无法遮盖select)!
- 解决DIV层被OBJECT、SELECT控件遮盖问题
- IE下, div无法在select上浮动的问题.
- select 在ie中无法设置高度 的问题
- Div Select Iframe 的相互遮盖
- div遮盖select的解决方案(简单)
- IE6中select控件遮盖问题
- Ext界面下做图片动态加载的图片放大镜效果并解决IE6下遮罩mask无法遮盖HTML的select控件问题
- Ext界面下做图片动态加载的图片放大镜效果并解决IE6下遮罩mask无法遮盖HTML的select控件问题
- select网页下拉列表与div层遮盖问题
- select网页下拉列表与div层遮盖问题
- 一个JS图片放大镜，实现动态记录的图片放大，避免内存泄露，解决IE6下无法遮盖select控件问题
- 一个JS图片放大镜，实现动态记录的图片放大，避免内存泄露，解决IE6下无法遮盖select控件问题
- 解决 Ie 6下 select挡住div的通用函数
- HTML5参考手册
- 使用Python读SEGY道头
- 雅虎优化ETags
- 什么是WEB场和WEB园
- 基于Wms协议的Map开发（六：通讯模块）
- 解决IE中DIV无法遮盖SELECT的问题
- 编码规约经典（转）
- 心浮气躁
- 局部减肥
- 求兔子数量
- 外企常用英文
- [技术分享 – ISA 篇] ISA 防火墙服务意外终止急救药方
- 为alfresco安装JBoss jBPM Process Designer
- 开博原因
