解决CSS position:fixed 抖动问题

• 2016-09-26
• 3562 View

将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>