【IE6.0 Bug总结之三】div无法遮盖select问题

【IE6.0 Bug总结之三】div无法遮盖select问题

     今天来看看IE6下的这个bug，绝对定位的div无法遮盖select，本来是想做一个弹出的div来作提示框，可是到了IE6下，无意中发现页面上的一个select无法被弹出的div遮住，好像是select把div划破了一样，具体效果如下图所示。

这是正常的图，上面的div把下面的select遮住了

 

这是IE6下不正常的效果，上面div不能把下面的select遮住

 

那么如何解决这个bug呢，解决该bug的方法如下：

1、将select放到iframe里面，div 无法覆盖select,但是iframe 可以覆盖select，而div可以覆盖iframe，所以解决办法就是用Z轴高度更高的Iframe元素，包裹或覆盖住下拉列表框控件，使其回到正常的Z轴高度上来，但每个select都加太烦了，不推荐

2、在需要遮盖select的那个div放入一个空的iframe，这样就可以针对性的解决问题了，简单，值得推荐

下面就第2种方法贴出css代码如下：

 1 <style type="text/css">
 2 #pop{
 3     width: 300px;
 4     height:100px;
 5     padding:10px;
 6     position:absolute;
 7     top:0;
 8     border:1px solid blue;
 9     background-color:#6666CC;
10     filter:alpha(opacity=70);
11     opacity:0.6;
12 }
13 #sect{
14     width:400px;
15     margin-top:60px
16 }
17 #pop iframe{
18     display:none;
19     display:block;
20     position:absolute;
21     top:0;
22     left:0;
23     z-index:-1;
24     width:3000px;
25     height:3000px;
26 }
27 </style>

html代码如下：

<div id="pop">这个是绝对定位的div，看看它有没有把select遮住<!--[if lte IE 6.5]><iframe></iframe><![endif]--></div>
<select id="sect">  <option value="1">我是select，你能把我遮住吗</option>     <option value="2">我是select，你能把我遮住吗</option> </select>

 

 

posted @ 2012-11-09 10:02  stylering  阅读(296)  评论(0)  编辑  收藏  举报