CSS position:fixed新版谷歌浏览器下(是新版哦),鼠标滚动会有抖动,不知道你们有没有遇到

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS position:fixed新版谷歌浏览器下(是新版哦),鼠标滚动会有抖动,不知道你们有没有遇到相关的知识,希望对你有一定的参考价值。

CSS position:fixed新版谷歌浏览器下(是新版哦),鼠标滚动会有抖动,不知道你们有没有遇到,希望大虾们指点迷境,这个问题在最新版的谷歌浏览器下也很是头疼,呵呵。在这里先谢谢大虾了

参考技术A 对,我也遇到了,不过只要先拖一下右边的滚动条,然后就不会抖动了,还有,在移动端浏览也会抖动。 我现在想用JS来实现固定定位追问

那js怎么写?我对javascript不懂的,只会套用别人的。且能适当的调整调整。

参考技术B 在样式那加多这两句

backgroung-size:cover;
-webkit-backgroung-size:cover;追问

试过了,好像不行

追答

能把文件发过来看看吗?316890129

解决IE6不支持position:fixed属性

最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性。上网收集了一下解决方案

比较好的方案就是利用css表达式进行解决

补充:CSS Expression (CSS 表达式),是一种使用动态设置 CSS 属性的方式,并且被 IE5 以上的版本所支持,但是 IE8 的标准模式已不再支持 CSS 表达式了

IE7和以上的浏览器都支持position:fixed;

 

之前写过一篇介绍过固定页脚的文字,那时候没在ie6下测试

方法一

<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}body{height:100%;overflow:auto;}
#gs{position:absolute}
</style>
<![endif]-->

优点:比较简单,方便!就针对IE6的hack

缺点:一个页面只能有一个元素是position:absolute 不然所有设置absolute的元素都会浮动

方法二 利用css表达式–固定底部

_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)));

优点:很好的兼容ie6

确定:css也比较耗性能,但是比用js写法要好一点

补充:解决ie6下振动bug

* html,* html body {background-image:url(about:blank);background-attachment:fixed;}

以上是关于CSS position:fixed新版谷歌浏览器下(是新版哦),鼠标滚动会有抖动,不知道你们有没有遇到的主要内容,如果未能解决你的问题,请参考以下文章

CSS解决position:fixed基于父元素定位而不是浏览器窗口

CSS解决position:fixed基于父元素定位而不是浏览器窗口

css position fixed 在移动端上为啥会 晃来晃去

解决IE6不支持position:fixed属性

css_position中的4种定位

CSS3 transform对fixed元素造成的影响笔记