解决DIV在IE6下无法遮盖select

开发 前端
本文和大家讨论一下关于select元素的一个问题,那就是一般DIV浮层在IE6下无法遮盖select标签,但是IE7和Firefox下DIV都可以遮住select标签。

你对DIV浮层在IE6下无法遮盖select标签是否了解,这里和大家一起讨论一下,其实很早以前我就碰到过关于select元素的问题,但是为什么IE7和FF下DIV都可以遮住select标签,本文会为你揭秘。

JavaScript巧解IE6 IE7 IE8兼容问题

这次讨论一下关于select元素的一个问题,其实很早以前我就碰到过关于select元素的问题,这次做网站又被问到同样的问题,就是:一般DIV浮层在IE6下无法遮盖selectaspxhome.com/search.asp?keyword=%b1%ea%c7%a9" target=_blank>标签,IE7和FF下DIV都可以遮住select标签。

列举个简单的实例阐述问题:

 

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  6. <title>无标题文档title> 
  7. <style type="text/CSS"> 
  8. #warp { position:absolute; top:10px; left:26px; width:200px; height:200px;}  
  9. .box { position:absolute; top:0; left:0; width:200px;   
  10.  
  11. height:200px; background:#FDF3D9; border:1px solid #EEAC53}  
  12. style> 
  13. head> 
  14.  
  15. <body> 
  16. <DIV id="warp"> 
  17.   <DIV class="box">dfsagdsaDIV> 
  18. DIV> 
  19. <form id="form1" name="form1" method="post" action=""> 
  20. <label> 
  21. <select name="select" id="select"> 
  22.   <option>测试选项option> 
  23.   <option>测试选项2option> 
  24.   <option>测试选项3option> 
  25. select> 
  26. label> 
  27. form> 
  28. body> 
  29. html> 
  30.  

 [提示:你可先修改部分代码,再按运行]

DIV在IE6下无法遮盖select,原因是在IE6下,浏览器将select元素视为窗口级元素,这时DIV或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的。#p#

网上有两种解决办法:

◆当浮动层DIV出现的时候,用JS将select隐藏,当浮动层DIV消失的时候select恢复出现。这种方法早期用的比较多,这里不多介绍。

◆ 用select同级别元素:iframe标签, 然后用实际的浮动层DIV和iframe放在一起。间接的使DIV遮住了select。

正确的代码:

  1.  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  6. <title>无标题文档title> 
  7. <style type="text/CSS"> 
  8. #warp { position:absolute; top:10px; left:26px; width:200px; height:200px;}  
  9. .box { position:absolute; top:0; left:0; width:200px;   
  10.  
  11. height:200px; background:#FDF3D9; border:1px solid #EEAC53}  
  12. .box iframe {width:400px; height:400px; z-index:-1}  
  13. style> 
  14. head> 
  15.  
  16. <body> 
  17. <DIV id="warp"> 
  18.   <iframe frameborder="0">iframe> 
  19.   <DIV class="box">dfsagdsaDIV> 
  20. DIV> 
  21. <form id="form1" name="form1" method="post" action=""> 
  22. <label> 
  23. <select name="select" id="select"> 
  24.   <option>测试选项option> 
  25.   <option>测试选项2option> 
  26.   <option>测试选项3option> 
  27. select> 
  28. label> 
  29. form> 
  30. body> 
  31. html> 
  32.  
  33.  

[提示:你可先修改部分代码,再按运行]

【编辑推荐】

  1. 深入探究IE8和IE7的24个区别
  2. 探究IE8与IE7具体功能中窗口功能按钮的变化
  3. 剖析Margin和Padding属性中四个值的先后顺序及区别
  4. 九步轻松解决IE6的各种疑难杂症
  5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题

 

责任编辑:佚名 来源: aspxhome.com
相关推荐

2010-08-19 15:04:26

IE6DIV

2010-08-18 15:41:38

IE6E7Firefox

2010-08-19 15:40:34

DIVIE6

2010-08-19 09:29:26

hoverIE6

2010-09-02 16:18:33

CSSDIVIE6

2010-08-25 11:23:31

IE6margin

2010-10-08 14:39:43

IE6DIVIE7

2010-08-27 15:44:47

2010-08-27 14:55:23

IE6IE7IE8

2010-08-18 16:18:59

IE6CSS

2010-08-18 16:10:35

IE6CSS

2010-08-18 15:22:28

IE6IE7Firefox

2009-08-14 09:20:40

抵制IE6

2010-08-27 15:38:21

兼容IE6IE7

2010-08-30 09:35:35

IE6IE7Firefox

2010-02-01 08:41:23

GoogleIE6

2010-09-15 14:22:05

IE6position

2010-08-19 10:40:36

position:fiIE6

2010-08-18 13:45:07

IE6IE7FF

2010-08-18 16:42:47

IE6CSSDIV
点赞
收藏

51CTO技术栈公众号