silence

IE6 以及一下版本下，选择框 Select 会覆盖 Div 中的内容。

一般情况下，可以将显示的内容放到 Iframe 中，然后再显示框架内的内容。由于 Iframe 的可以显示在 Select 上层，就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在 Div 内容中加入不显示的 Iframe 框架即可，不用修改其他内容。

CSS 代码：

body {
margin: 0;
padding: 0;
text-align: center;
background-color: #eee;
}
#bd {
margin: 20px auto;
padding: 5px 20px 20px;
border: 1px solid #bbb;
width: 760px;
background-color:#9CCE2E;

}
#popup {
width: 300px;
height: 100px;
padding: 10px;
position: absolute;
left: 443px;
top: 57px;
border: 1px solid blue;
background-color: #fff;
filter:alpha(opacity=60);
opacity:0.4;
}
#popup iframe {
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;/*must have*/
top:0;/*must have*/
left:0;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
width:3000px;/*must have for any big value*/
height:3000px/*must have for any big value*/;
}

——————————————————————————————————————————————

尤其注意这个样式：

#popup iframe {
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;/*must have*/
top:0;/*must have*/
left:0;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
width:3000px;/*must have for any big value*/
height:3000px/*must have for any big value*/;
}

——————————————————————————————————————————————

XML/HTML 代码：

#popup iframe {
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;/*must have*/
top:0;/*must have*/
left:0;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
width:3000px;/*must have for any big value*/
height:3000px/*must have for any big value*/;
}

XML/HTML 代码：

<div style=” height:50px; line-height:50px; color:#FFFFFF; background:#333333; margin-bottom:20px; padding-left:30px; font-size:16px”>IE6下div遮盖select的解决方?–silence bolg<div>
<div id=”bd”>
<h1></h1>
<div>
<label for=”ddTest”>Test</label>
<select id=”ddTest”>
<option>…</option>
<option>pick me</option>
</select>
</div>
</div>
<div id=”popup”>Silence  BLOG<!–[if lte IE 6.5]><iframe></iframe><![endif]–></div>