本文介绍了一种解决IE6浏览器中Select下拉框被遮挡的问题的方法。通过使用绝对定位的div和一个大的iframe来创建遮罩层，确保Select元素在IE6中的正常显示。此方案适用于需要兼容旧版IE浏览器的网页应用。
<!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>IE6 select 浮层遮盖</title>
<style>
.as-selectmask {
position: absolute;
left:0;
top:0;
z-index: 10;
overflow: hidden;
width: 33em;
height:50px;
}
.as-selectmask iframe {
position: absolute;
top: 0;
left: 0;
z-index: -1;
border:none;
filter: mask();
width: 3000px; /* for any big value */
height: 3000px /* for any big value */
}
</style>
</head>
<body>
<select>
<option>1</option>
<option>2</option>
</select>
<div class="as-selectmask" style="background:#ddd;">
内容<br/>
<!--[if lt IE 7]><iframe src="javascript:'';"></iframe><![endif]-->
</div>
</body>
<!--
mask的用法
/*设置CSS样式开始*/
div{position:absolute;top:20;left:40; filter:mask(color:#0000ff);}
/*定义DIV区域的样式，绝对定位，mask属性的color参数值指定用什么颜色遮住对象*/
p{font-family:bailey;font-size:72pt; font-weight:bold;color:#ff0000;}
/*定义P区域内的样式，字体名称、大小、粗细、前景色*/
<div>
<p> wenyleaf </p>
</div>
-->
</html>
扫一扫
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
