IE6浏览器下div无法遮盖select下拉框解决方法

IE6浏览器下div无法遮盖select下拉框解决方法:
在IE6浏览器下,select下拉框无法被div遮盖,其他的主流浏览器都是正常的。这里简单介绍一下如何解决此问题。
默认状态下IE6的表现:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>IE6下无法覆盖select-蚂蚁部落</title>
<style type="text/css">
.mydiv
{
  width:300px;
  height:300px;
  position:absolute;
  background-color:green;
  left:50px;
}
</style>
</head>
<body>
<div class="mydiv"></div>
<div>
<select name="myselect">
  <option value="1">div+css专区</option>
  <option value="2">jQuery专区</option>
</select>
</div>
</body>
</html>

以上代码在IE6浏览器下就会显现出此问题,在其他主流浏览器中是正确显示。
解决方案:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>IE6下无法覆盖select-蚂蚁部落</title>
<style type="text/css">
.mydiv
{
  width:300px;
  height:300px;
  position:absolute;
  background-color:green;
  left:50px;
  z-index:6;
}
.myframe
{
  width:300px;
  height:300px;
  border:none;
  position:absolute;
  left:50px;
  z-index:5;
  filter:alpha(opacity=0);
}
</style>
</head>
<body>
<div class="mydiv"></div>
<select name="myselect" style="position:absolute;z-index:4">
  <option value="1">div+css专区</option>
  <option value="2">jQuery专区</option>
</select>
<!--[if lte IE 6]>
<iframe class="myframe"></iframe>
<![endif]-->
</body>
</html>

解决方案分析:
虽然div无法覆盖select下拉框,但是iframe能够覆盖select下拉框,而div又可以覆盖iframe,通过三个元素的一些列覆盖关系来实现想要的效果。实现步骤如下:
一.创建一个与div同等尺寸的iframe元素用来覆盖select下拉框。并且通过判断当前浏览器是否为IE6来决定iframe是否生效。
二.让div、select和iframe元素都使用绝对定位,这样他们三个就脱离文档流,可以相互覆盖了。
三.通过使用z-index属性确定三个元素的覆盖关系。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0429/417.html

时间: 2024-11-06 05:52:35

IE6浏览器下div无法遮盖select下拉框解决方法的相关文章

InstallShield Limited Edition for Visual Studio 国内注册时国家无下拉框解决方法

注册地址:http://learn.flexerasoftware.com/content/IS-EVAL-InstallShield-Limited-Edition-Visual-Studio 火狐打开网址后,按F12打开调试工具:输入以下内容,回车 var div=document.getElementById("cCountry"); var span=document.createElement("option"); span.value="Chi

利用下拉框的方法进行txt列表中内容的左右切换

利用下拉框的方法实现两个txt列表内内容的左右切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="left" size="10" multiple="multiple" style=

img与容器下边界的空隙(缝隙) 的解决方法

问题描述: IE7下 img与div(block类型元素)下边界有距离(或者叫缝隙.空隙). IE7才会有这个问题,IE8下是没有的. 解决方案: 法宝一:定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top. img{vertical-align:bottom;}   法宝二:定义容器里的字体大小为0.div { width:110px; border:1px solid #000000; font-si

linux下安装Oracle时交换空间不足的解决方法

摘:linux下安装Oracle时交换空间不足的解决方法 linux上安装Oracle时交换空间不足的解决办法 增加交换空间有两种方法: 严格的说,在系统安装完后只有一种方法可以增加swap,那就是本文的第二种方法, 至于第一种方法应该是安装系统时设置交换区. 1.使用分区: 在安装OS时划分出专门的交换分区,空间大小要事先规划好,启动系统时自动进行mount. 这种方法只能在安装OS时设定,一旦设定好不容易改变,除非重装系统. 2.使用swapfile:(或者是整个空闲分区) 新建临时swap

windows下 sqlplus / as sysdba 报ora-12560的终极解决方法

windows下,sqlplus / as sysdba经常报 ORA-12560: TNS:protocol adapter error,解决这个报错,有多个方法: 1.确认windows注册表中的ORACLE_HOME 键及其 键值 是正确的,是有效的 比如:HKEY_LOCAL_MACHINE\SOFTWARE\ORACLE\KEY_OraDb10g_home1下,找到ORACLE_HOME 键,对应的键值为H:\oracle\product\10.2.0\db_1 ,其实正确的键值为F:

Win8/8.1下驱动安装“数据无效”错误的有效解决方法

Windows8.1 安装完vmware 后并没有安装 vmnet1,vmnet8 这两个虚拟网卡,纠结了半天,原来是两个服务没打开. 如果你使用的是Windows8或者8.1,并且精简过系统,那么在安装驱动程序的过程中,你可能会遇到"数据无效"的错误.笔者确信所拥有的驱动程序是可以安装在Win8/Win8.1的系统中的,但是查阅了网络上关于所有安装驱动程序过程中出现"数据无效"的解决方法,都尝试无果,后来终于摸索出行之有效的解决方法--开启服务,屡试不爽. 原来,

VS2013/2012 下无法打开 源 文件“stdafx.h”的解决方法

VS2013/2012下代码一写上去保存就报错了,下方提示无法打开 源 文件"stdafx.h" 如图: 百度了一下,对于VS2010有这样的方法可以解决: 在项目属性中展开C/C++,选择常规,在附加包含目录里加入"$(ProjectDir)" 大家可以看到在我的VS2013下完全没作用. 后来发现这样就成功了: 那个预编译头文件是自己就有的,我想VS2013/2012默认就包含了"stdafx.h"吧,所以不必再写一次 VS2013/2012

mac下https方式连接svn连接不上解决方法

以前一个人开发没有考虑代码服务器的问题,现在需要提交代码到服务器,服务器安装了cvs以及svn,一般的Mac OS X都已经安装了subversion客户端,自然是选择svn了,不过碰到了连接不上的问题. 由于客户端使用https访问服务器,是需要进行安全认证的. 为此,在终端输入 svn list  https://192.168.1.103/svn/IOS 出现 Error validating server certificate for 'https://192.168.2.126:44

windows下使用GNU make命令报错的解决方法

windows下使用GNU make命令报错的解决方法=> 错误信息:make: Interrupt/Exception caught (code = 0xc00000fd, addr = 0x4227d3) ## 1.原因环境变量中配置了`D:\Program Files (x86)\Git\bin`,该目录下存在一个`sh.exe` 在执行make命令时,如果在`MakeFile`文件中没有指定shell的路径,`make`就会到环境变量中,去找一个`X:\\XXX\XXX\sh.exe`作