ie6经典bug弹出框盖不住select的解决办法

     昨天切页面的时候遇到了传说中的经典————ie6经典bug弹出框盖不住select。以前只是有所耳闻,但是未曾谋面,昨天有幸见到真面目!!

    我昨天试过网上的很多方法,有的说是用iframe把select包住,有的说是把iframe放在弹出层的下面,有的说是把iframe放在弹出层的里面,这些我都试过啦,但是有的效果是实现啦,但是很勉强,因为iframe是盖住select啦,而select也消失的没了。这个让我很郁闷,不知道为什么。。。。今天早上来啦,头脑清醒的解决啦。我就把原来的width:100%,height:100%换成弹出层的具体宽高数值,就好啦,盖住select的同时,select还在。而且给了绝对定位的top和left值,这样iframe就跟弹出框完全重合了,我之前的iframe框是出现在弹出框的下面。而且我也没有按照网上给iframe加z-index值。呵呵,这个iframe上的z-index还是必须要加的,z-index:-1,确保是在弹出层下方,不然添加图片的按钮不能点击。

   

这是ie6下面原来的样子,

这是修改好的

附上关键代码:

 1 <!-- 弹出层-->
 2                         <div class="pop_bg">
 3                             <p class="pop_tip"></p>
 4                             <div class="sign_pop">
 5                                 <dl>
 6                                     <dt>
 7                                         <ul class="tip">
 8                                             <li><a href="#">本地上传</a></li>
 9                                         </ul>
10                                         <a href="#" class="close"><em>&nbsp;</em></a>
11                                     </dt>
12                                     <dd class="add_btn">
13                                         <a href="#"><em>&nbsp;</em>添加图片
14                                             <form action=""><input type="file" class="add_f" size="1"/></form>
15                                         </a>
16                                     </dd>
17                                     <dd class="discrib">支持上传单张5M以下的gif、jpg、png文件</dd>
18                                 </dl>    
19                             </div>
20                             <iframe id="DivShim"  scrolling="no" style="position:absolute;top:0;left:0;width:282px;height:128px;-moz-opacity:0;-webkit-opacity:0; opacity:0; filter:alpha(Opacity=0);background:transparent;"> </iframe> 
21                         </div>
22 <!--这里是select-->
23 <div class="promo_panal">
24                 <div class="head clearfix">
25                     <span class="tit">发微方式</span>
26                 </div>
27                 <div class="body">
28                     <form action="" method="get" class="form_infor">
29                         <div class="form_msg clearfix">
30                             <input name="" type="radio" class="rad" />
31                             <label>立即发送</label>
32                         </div>
33                         <div class="form_msg input clearfix">
34                             <input name="" type="radio" class="rad" />
35                             <label>定时发送:</label>
36                             <input name="" type="text" class="txt" />
37                             <a href="#" class="calendar"><em class="ban ban_4_11">&nbsp;</em></a>
38                             
39                                 <select name="" class="select">
40                                     <option>请选择</option>
41                                 </select>
42                             
43                             <label class="end"></label>
44                             
45                                 <select name="" class="select">
46                                     <option>请选择</option>
47                                 </select>
48                         
49                             <label class="end"></label>
50                         </div>
51                     </form>
52                 </div>
53             </div>
posted @ 2012-07-11 11:58  enggirl  阅读(652)  评论(0编辑  收藏  举报