IE下div无法遮盖select下拉框解决方法
摘要：IE6浏览器下div无法遮盖select下拉框解决方法:在IE6浏览器下，select下拉框无法被div遮盖，其他的主流浏览器都是正常的。这里简单介绍一下如何解决此问题。默认状态下IE6的表现:IE6下无法覆盖select-蚂蚁部落以上代码在IE6浏览器下就会显现出此问题，在其他主流浏览器中是正确显...
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属性确定三个元素的覆盖关系。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢