【IE6的疯狂之五】div遮盖select的解决方案

时间：2009年03月26日作者：愚人码头查看次数:9,601 views评论次数：7

IE6以及一下版本下，选择框Select会覆盖Div中的内容
一般情况下，可以将显示的内容放到Iframe中，然后再显示框架内的内容。由于Iframe的可以显示在Select上层，就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在Div内容中加入不显示的Iframe框架即可，不用修改其他内容。
例如：http://www.css88.com/demo/div_select/div_select.html

CSS代码
  1. body { margin: 0; padding: 0; text-align: center; background-color: #eee; }   
  2. #bd { margin: 20px auto; padding: 5px 20px 20px; border: 1px solid #bbb; width: 760px; background-color:#9CCE2E;  }   
  3. #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;}   
  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: 100%;/*must have for any big value*/height: 100%;/*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: 100%;/*must have for any big value*/height: 100%;/*must have for any big value*/;}  

 

XML/HTML代码
  1. <div id=“bd”>  
  2. <h1>IE6下div遮盖select的解决方案</h1>  
  3. <div class=“parameter”>  
  4. <label for=“ddTest”>Test</label>  
  5. <select id=“ddTest”>  
  6. <option>…</option>  
  7. <option>pick me</option>  
  8. </select>  
  9. </div>  
  10. </div>  
  11. <div id=“popup”>  
  12. Is the select element poking through?   
  13. <!–[if lte IE 6.5]><iframe></iframe><![endif]–>  
  14. </div>  

转载注明：http://www.css88.com/article.asp?id=503
注意：<!–[if lte IE 6.5]><iframe></iframe><![endif]–>：表示在IE6下显示<iframe></iframe>，但是我们从样式中可以看出这个iframe是看不到的；
目前存在的bug：IE6下下拉框（select）看不到。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《【IE6的疯狂之五】div遮盖select的解决方案》

如果你读了我的文章，觉得有帮助： 说明
标签：分类：html+css

您可能感兴趣的文章

4条评论
  1. Kaven留言于:2009年06月26日09:31

    IE6还是穿透呀～

    [回复]

  2. 前端开发留言于:2010年04月22日11:16

    请楼主发表东西的时候先验证一下

    [回复]

  3. 前端开发留言于:2010年04月22日11:27

    抱歉 这个真的可以 我刚刚没测试好

    [回复]

  4. rayniki留言于:2011年09月06日14:35

    http://www.css88.com/demo/div_select/div_select.html 把这个页面的代码下载后测试成功。但是滑动竖线滚动条select又出来了。这是为什么呢？

    [回复]

发表评论

*

*