夏日博客

A-A+

IE6固定定位底部且滚动时不晃动

2016年01月28日 前端设计 暂无评论 阅读 5 views 次

一个关于IE6固定定位底部且滚动时不晃动，有需要参考的朋友可参考参考。

给标签:

  1. <div id="fixed"></div>  

设置样式,代码如下:

  1. body {  
  2. _background-image: url(about:blank);     /*用浏览器空白页面作为背景*/  
  3. _background-attachment: fixed;     /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/  
  4. }  
  5. #fixed {  
  6. position: fixed;  
  7. top: 50%;  /* 其他浏览器下定位，在这里可设置坐标*/  
  8. _position: absolute;  /*IE6 用absolute模拟fixed*/  
  9. _top: expression(document.documentElement.scrollTop + Math.round(document.documentElement.offsetHeight / 2) + "px"); /*IE6 动态设置top位置*/  
  10. background:#f60;  
  11. border: 1px solid #f00;  
  12. width: 100px;  
  13. height: 100px;  
  14. margin-left: -50px;  
  15. margin-top: -50px;  
  16. left: 50%;  
  17. }  

实例代码如下:

  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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  6. <title>无标题文档</title>  
  7. </head>  
  8. <style type="text/css">  
  9. body {margin:0; padding:0; border:0; background:#fff;}  
  10. #menu { height:300px; width:100px;display:block; top:50%; left:50%; margin-top:-160px; margin-left:-60px; width:130px; position:fixed; border:1px solid #888; padding:10px; text-align:center; font-weight:bold; color:#fff; background:#fff;}  
  11. * html #menu {position:absolute;}  
  12. </style>  
  13. 在ie6里就是这部分代码有着让浮层不晃动的功效。哈哈哈哈  
  14. <!--[if lte IE 6]>  
  15. <style type="text/css">  
  16. /*<![CDATA[*/  
  17. body { height:100%; overflow-y:auto;} 
  18. html {overflow-x:auto; overflow-y:hidden;} 
  19. /*]]>*/  
  20. </style>  
  21. <![endif]-->  
  22. <body>  
  23. <div style="height:1000px; width:90%; margin:0px auto; background:#75cdfc">2222222</div>  
  24. <div id="menu">  
  25. DUMMY MENU  
  26. <a href="#" title="Dummy menu item">Mozilla</a>  
  27. <a href="#" title="Dummy menu item">Opera</a>  
  28. <a href="#" title="Dummy menu item">Netscape</a>  
  29. <a href="#bites" title="Dummy menu item">Firefox</a>  
  30. <a href="#" title="Dummy menu item">IE6</a>  
  31. <a href="#" title="Dummy menu item">Windows</a>  
  32. <a href="#" title="Dummy menu item">Style</a>  
  33. <a href="#" title="Dummy menu item">CSS</a>  
  34. <a href="comment_id=position fixed" title="Your comments">Comments</a>  
  35. </div>  
  36. </body>  
  37. </html>  
标签：

给我留言