select遮住div的解决方法之——iframe篇

在做一个项目的时候，如大家所遇到的情况一样，div被select遮住了（测试在IE6下才有这样的问题）

因为我做的是遮罩层

#bgbox{background:#000;opacity:0.5;filter:alpha(opacity = 50);position:absolute;top:0;left:0;width:100%;z-index:99;display:none;}

<select>
  <option>3个月</option>
  <option>6个月</option>
  <option>9个月</option>
  <option>1年</option>
  <option>2年</option>
</select>
<div id="bgbox">
<iframe id="ifr" style="position:absolute; z-index: -1; width: 100%; height:100%;background:#000;opacity:0.5;filter:alpha(opacity = 50);top: 0; 
left: 0;scrolling:no;" frameborder="0" src="about:blank"></iframe>
</div>

<script type="text/javascript">
var oBgBox = document.getElementById("bgbox");
var oIfr = document.getElementById("ifr");
function showBox(){
    oBgBox.style.display = "block";
    oBgBox.style.height = oIfr.style.height = document.body.offsetHeight + "px";
}

</script>

这是主要的代码，但是仔细测试了一下，发现在IE6下滚动页面，select还是会浮出来（虽然只是在滚动的时候，停止滚动是正常的）。