2009年8月15日 星期六

CSS Position Fixed for IE6

CSS Position Fixed for IE6
修正IE6不支持position:fixed的bug

/* 除了IE6的主流瀏覽器通用的方法 */
.fixed-top /* 頭部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左側固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右側固定 */{position:fixed;right:0px;left:auto;}



/*讓position:fixed在IE6下可用! */
* html,* html body /* 修正IE6振動bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 頭部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右側固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 左側固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}


或是簡單的
Fixed Positioning in Internet Explorer 6

   1.  * {
   2.     margin: 0;
   3. }
   4. html, body {
   5.     height: 100%;
   6.     overflow: auto;
   7. }
   8. .wrapper {/*正常的*/
   9.     position: relative;
  10.     width: 100%;
  11.     height: 100%;
  12.     overflow: auto;
  13. }
  14. .box {/*固定的*/
  15.     position: fixed;
  16.     left: 10px;
  17.     top: 180px;
  18. }
  19. * html .box {
  20.     position: absolute;
  21. }
標籤：