IE6下面position:absolute失效导致绝对定位层不显示的原因

 今天早上重构一个机票订购页面的时候,为了配合JS特效所以需要写一个绝对定位浮动层,写完在测试的时候发现,在FF、ie8、ie7、op下都可以正常显示,可是到了IE6的时候,这个绝对定位浮动层却无法显示,把CSS中“position:absolute”去掉后就可以显示出来,这是何原因呢?

经过baidu、goole折腾研究了半天后终于找到了原因,原来是这个绝对定位浮动层旁边紧邻的那个div层是个使用“float:left”左浮动,而导致这个绝对定位浮动层在IE6下无法显示,解决办法就是在这个绝对定位浮动层前面插入一个清除浮动的层。

总结:在IE6下面 position:absolute的绝对定位层前面紧邻的那个层如果有用到“float” css浮动属性会导致这个绝对定位层无法显示。请看下面两个对比案例演示。

1、这个是前面没有清除浮动层,绝对定位层无法显示的演示

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>MJBlog(mj.588cy.com)</title> 
  6. <style type="text/css"> 
  7. .ck_list_lb{ width:98px; height:20px; border:1px solid #bababa; display:block; margin-left:4px; float:left; background:url(http://mj.588cy.com/img/bg_mj.png) no-repeat right -620px; position:relative;color:#555555; font-size:12px;} 
  8. .ck_list_lb input{ color:#555555;} 
  9. .ck_input_b{ width:70px; float:left; border:0px; height:20px;padding:0px 0px 0px 2px; _height:17px; _padding:3px 0px 0px 0px; overflow:hidden;} 
  10. .span_lb{ width:22px; height:20px; float:left;} 
  11. .span_fd{ width:98px; height:auto; border-width:0px 1px 1px 1px; border-style:solid; border-color:#bababa; position:absolute; left:-1px; top:21px;} 
  12. .span_fd a{ width:92px; height:20px; line-height:20px; padding:2px 3px; display:block; cursor:pointer; text-decoration:none; color:#555555;} 
  13. .span_fd a:hover{ background-color:#0066CC; color:#FFFFFF;} 
  14. .ck_input_a{ width:100px; height:20px; float:left; border:1px solid #bababa; padding:0px 2px; _height:17px; _padding:3px 2px 0px 2px;} 
  15. .clear { diplay: block; clear: both; height:0px; font-size: 0; line-height: 0; margin:0px; padding:0px;} 
  16. </style> 
  17. </head> 
  18.  
  19. <body> 
  20. <input name="" type="text" class="ck_input_a" /> 
  21. <span class="ck_list_lb"> 
  22. <input name="" type="text" class="ck_input_b" value="成人(>12岁)" /> 
  23. <div class="span_lb"></div> 
  24. <div class="span_fd"><a href="#">成人(>12岁)</a><a href="#">儿童(2-12岁)</a></div> 
  25. </span> 
  26. </body> 
  27. </html> 

2、这个是前面有清除浮动层,绝对定位层正常显示的演示

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>MJBlog(mj.588cy.com)</title> 
  6. <style type="text/css"> 
  7. .ck_list_lb{ width:98px; height:20px; border:1px solid #bababa; display:block; margin-left:4px; float:left; background:url(http://mj.588cy.com/img/bg_mj.png) no-repeat right -620px; position:relative;color:#555555; font-size:12px;} 
  8. .ck_list_lb input{ color:#555555;} 
  9. .ck_input_b{ width:70px; float:left; border:0px; height:20px;padding:0px 0px 0px 2px; _height:17px; _padding:3px 0px 0px 0px; overflow:hidden;} 
  10. .span_lb{ width:22px; height:20px; float:left;} 
  11. .span_fd{ width:98px; height:auto; border-width:0px 1px 1px 1px; border-style:solid; border-color:#bababa; position:absolute; left:-1px; top:21px;} 
  12. .span_fd a{ width:92px; height:20px; line-height:20px; padding:2px 3px; display:block; cursor:pointer; text-decoration:none; color:#555555;} 
  13. .span_fd a:hover{ background-color:#0066CC; color:#FFFFFF;} 
  14. .ck_input_a{ width:100px; height:20px; float:left; border:1px solid #bababa; padding:0px 2px; _height:17px; _padding:3px 2px 0px 2px;} 
  15. .clear { diplay: block; clear: both; height:0px; font-size: 0; line-height: 0; margin:0px; padding:0px;} 
  16. </style> 
  17. </head> 
  18.  
  19. <body> 
  20. <input name="" type="text" class="ck_input_a" /> 
  21. <span class="ck_list_lb"> 
  22. <input name="" type="text" class="ck_input_b" value="成人(>12岁)" /> 
  23. <div class="span_lb"></div> 
  24. <div class="clear"></div> 
  25. <div class="span_fd"><a href="#">成人(>12岁)</a><a href="#">儿童(2-12岁)</a></div> 
  26. </span> 
  27. </body> 
  28. </html> 

转载请注明:代码家园 » IE6下面position:absolute失效导致绝对定位层不显示的原因

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)