(原创)关于IE6下浮动div无法遮挡住下拉框select的解决办法

今天遇到了一个IE6下的前端问题,弹出的div层在IE6下无法遮挡住下拉框select元素,测试代码如下:

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#div_mask
{
width
:200px;
height
:200px;
background
:gray;
position
:absolute;
left
:0;
top
:0;
}
</style>
</head>
<body>
<div id="div_mask"></div>
<select>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</body>
</html>

预期效果:弹出层div_mask能顺利遮挡住下拉框,但是在IE6下的效果如下图:

(原创)关于IE6下浮动div无法遮挡住下拉框select的解决办法

出现了穿透的效果,采用的解决办法为:使用iframe设定与弹出层一样的宽度和高度,以及设置z-index叠加值来遮住下拉框,再设置弹出层的z-index值来遮挡住iframe,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#div_mask
{
width
:200px;
height
:200px;
background
:gray;
position
:absolute;
left
:0;
top
:0;
z-index
:2;
}
#iframe_mask
{
width
:200px;
height
:200px;
background
:red;
position
:absolute;
left
:0;
top
:0;
z-index
: 1;
border
: 0px;
}
</style>
</head>
<body>
<div id="div_mask"></div>
<iframe id="iframe_mask"></iframe>
<select>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</body>
</html>


问题解决,IE6下显示效果正常:

(原创)关于IE6下浮动div无法遮挡住下拉框select的解决办法

 

需要注意的一个问题:必须设置iframe的边框宽度为0,即border:0px; 否则可能会出现以下的细节效果问题:

(原创)关于IE6下浮动div无法遮挡住下拉框select的解决办法

 

希望对大家有帮助:)

你可能感兴趣的:(select)