解决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>复制代码

解决CSS position:fixed 兼容问题相关推荐

解决CSS position:fixed 抖动问题
解决CSS position:fixed 抖动问题参考文章: (1)解决CSS position:fixed 抖动问题 (2)https://www.cnblogs.com/arlar/p/5660 ...
position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
css position fixed 居中,css中position:fixed实现div居中上下左右居中
上下左右居中代码如下 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height ...
CSS position:fixed定位时 “高度坍塌” 问题的解决
这问题两种方法: 1.给第二个模块div设置margin-top的值,margin-top的值设为大于等于固定定位模块的高度 2.这个方法是百度百科手机页面用的,先为固定定位元素设一个父元素,不设高度 ...
CSS position: fixed 相对于父元素定位
使用 fixed 进行布局的元素,在一般情况下会相对于屏幕视窗来进行定位.但是如果父元素的 transform, perspective 或 filter 属性不为 none 时,position为f ...
html 固定定位怎么居中,position fixed居中
position:fixed div如何居中据闻是以left right top bottom来定位的,那么剧中是怎么做的上下左右居div{position:fixed;margin:auto;le ...
解决微信小程序使用css滤镜filter后position fixed错乱
最近给wechat小程序设置灰色页面,给page标签使用灰色滤镜后导致position fixed位置错乱,无法正确定位,样式错乱解决方案: 不对page view标签设置滤镜filter,只对 t ...
跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
完美解决IE6不支持position:fixed的bug
废话不多说,先看一下下面这段代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...

解决CSS position:fixed 兼容问题

解决CSS position:fixed 兼容问题相关推荐

最新文章

热门文章