解決CSS position:fixed 相容問題

夏侯長耀發表於2018-08-28
CSS

將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>
   
 複製程式碼

相關文章