解決CSS position:fixed 抖動問題

將id為head的div固定在最頂部，所設置的CSS屬性如下：

#head {
    overflow:hidden;
    *zoom:1;
    height:44px;
    background-image:url(../Img/bg.png);
    position:fixed;
    z-index:500;
    width:100%;
}

在自己手機上打開頁面，向下滑動時這個div會出現短暫的向下瞬間移動之后馬上跳回到最頂部，網上資料表明是position:fixed不兼容某些瀏覽器的緣故，解決方法有多種：

1.給這個設置了position:fixed的元素再設置一個CSS屬性：-webkit-transform: translateZ(0);

2.給html, body元素設置CSS屬性 {height:100%;overflow:auto;margin: 0;}

3.引入jquery1.7.2的類庫，<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

4.在fiexd內設置position:absolute，如：

　<div style="position:fiexd;bottom:0px;">

   　　<div style="position:absolute;">

   　　</div>

   </div>

 

參考資料：

chrome修復css屬性position fixed抖動

幾種解決position:fixed 抖動的方法