IE6 position:fixed问题解决方案

2022-5-3

本文向大家简单介绍一下解决IE6下position:fixed问题方法，造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素，滚动条是body元素的，相信本文介绍一定会让你有所收获。

***的IE6 position:fixed

这个内容是老生常谈了，主要问题就是IE6不支持position:fixed引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用position:absolute来替代解决,可是我们真的解决了么?没有,因为当页面比较长的时候,拖动滚动条,那个fix的地方也相应的闪动.虽然最终会近似于需求的目标,但是不***.那么如何解决这一问题呢?

造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素,滚动条是body元素的(貌似ie6中他们的区别就是在于滚动条界限那里)。知道了原因,我们就大概知道如何解决了:

 
 
 
    
  
  
  
  1. <!--[ifIE6]> 
    2. 
  
  
  
  2. <styletypestyletype="text/css"> 
    3. 
  
  
  
  3.  html{overflow:hidden;}  
    4. 
  
  
  
  4.  body{height:100%;overflow:auto;}  
    5. 
  
  
  
  5.  #fixed{position:absolute;}  
    6. 
  
  
  
  6. </style> 
    7. 
  
  
  
  7. <!--[endif]--> 
    8. 
  
  
  
  8.  
    9.

没错,就是加上这样的一段code,现在看看完整的页面code:

 
 
 
    
  
  
  
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
    2. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3. 
  
  
  
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
    4. 
  
  
  
  4. <head> 
    5. 
  
  
  
  5. <metahttp-equivmetahttp-equiv="Content-Type"
    6. 
  
  
  
  6. content="text/html;charset=utf-8"/> 
    7. 
  
  
  
  7. <title>IE6position:fixed</title> 
    8. 
  
  
  
  8. <style> 
    9. 
  
  
  
  9. *{  
    10. 
  
  
  
  10.  padding:0;  
    11. 
  
  
  
  11.  margin:0;  
    12. 
  
  
  
  12. }  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14. #fixed{  
    15. 
  
  
  
  15.  background-color:#ddd;  
    16. 
  
  
  
  16.  border:1pxsolid#aaa;  
    17. 
  
  
  
  17.  position:fixed;  
    18. 
  
  
  
  18.  right:0;  
    19. 
  
  
  
  19.  top:0;  
    20. 
  
  
  
  20. }  
    21. 
  
  
  
  21. </style> 
    22. 
  
  
  
  22. <!--[ifIE6]> 
    23. 
  
  
  
  23. <styletypestyletype="text/css"> 
    24. 
  
  
  
  24.  html{overflow:hidden;}  
    25. 
  
  
  
  25.  body{height:100%;overflow:auto;}  
    26. 
  
  
  
  26.  #fixed{position:absolute;right:17px;}  
    27. 
  
  
  
  27. </style> 
    28. 
  
  
  
  28. <!--[endif]--> 
    29. 
  
  
  
  29. </head> 
    30. 
  
  
  
  30. <body> 
    31. 
  
  
  
  31. <divstyledivstyle="height:2000px"></div> 
    32. 
  
  
  
  32. <dividdivid="fixed"> 
    33. 
  
  
  
  33. FIXED  
    34. 
  
  
  
  34. </div> 
    35. 
  
  
  
  35. </body> 
    36. 
  
  
  
  36. </html> 
    37.

【编辑推荐】

  1. JavaScript巧解IE6至IE8兼容问题
  2. CSS position属性定义和用法
  3. ***实现IE6/IE7/FF浏览器兼容通用方法
  4. CSS属性display:inline-block使用揭秘
  5. 深入探究DIV CSS布局中position属性用法

 

版权声明：
作者：后浪云
链接：https://www.idc.net/help/397191/
文章版权归作者所有，未经允许请勿转载。
THE END
Copyright © 2025 后浪云 网站地图