文档章节

完美解决IE6中fixed抖动问题的方法

豆花饭烧土豆
 豆花饭烧土豆
发布于 2015/05/29 06:05
字数 317
阅读 16
收藏 0

我们可以通过position:fixed来实现元素的固定效果,如网页中底部的"回到顶部菜单",底部的toolbar,对联广告等等,可惜fixed属性在IE6及以下是不支持的。通常的作法,我们用JS或者IE表达式来达到这个效果。

如:

.fixed{ 
   position: fixed; 
   _position: absolute; 
   _top: expression(eval(document.documentElement.scrollTop)); 
   }

可惜,又遇到一个问题,页面滚动的时候,会出现抖动现象.

如果解决呢?

无意中发现我们momo社区的左侧导航栏在IE6下页面滚动时候居然不抖动,看了下CSS,和上面的表达式没有任何区别呀。。。

于是对HTML和CSS进行最简化删除,最终发现,原来是body属性中设置了背景图片刚好解决了这个抖动的问题!

body中设置了一个样式:

body{ 
   background: url(body.jpg) fixed; 
   }

上网搜了下,居然已经有人这样通过这个办法解决,顺便还找到了另一个解决方法,总结如下:

方法1

.fixed{ 
   position: fixed; 
   _position: absolute; 
   _top: expression(eval(document.documentElement.scrollTop));} 
   html{ 
   _text-overflow:ellipsis; 
   }

方法2

.fixed{ 
   position: fixed; 
   _position: absolute; 
   _top: expression(eval(document.documentElement.scrollTop)); 
   } 
   html { 
   _background: url(xx.jpg) fixed; /* 文件不存在亦可以,随便命名 */
   }

 

本文转载自:http://www.cnblogs.com/wawahaha/p/3531947.html

豆花饭烧土豆

豆花饭烧土豆

粉丝 15
博文 357
码字总数 93591
作品 0
深圳
私信 提问
css固定元素位置(fixed)

我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何滚动滚动条,位置不变,就例如经常看到的弹出广告。方法一般是使用js控制,或者使用css。这里我写的是css的控制方法。...

i33
2012/11/06
105
0
Vue实践经验

这样能让背景平铺 没有数据的直到编译完成才显示: H5与APP iframe交互! 修复css属性position fixed抖动 目前可以解决的方法我也尝试了一些,只剩下几个。 第一种,给fixed的元素添加css的样...

Billydotzhang
2016/08/31
88
0
解决IE6不支持position:fixed问题

很少的时候,界面上需要一个固定位置的块,不论页面怎么滚动,始终停在它的位置,比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用,很方便,...

spademan
2013/10/25
178
0
修正IE6不支持position:fixed的bug

众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候,遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用...

Nannull
2014/02/28
51
0
ie6,ie7,ie8对position:fixed的圆满解决方案-整理

ie6,ie7,ie8对position:fixed的完美解决方案--整理 ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动;以下总结方法...

donny945
2014/05/12
173
3

没有更多内容

加载失败,请刷新页面

加载更多

框架和库的区别

框架和库的区别 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。 node 中的 express; 库(插件):提供某一个小功能,对项目的侵入性较小...

庭前云落
7分钟前
2
1
基于 Dawn 进行多工程管理

1. 简述 当一个项目中子工程较多时,就会面临「单仓库(Monorepo)」还是「多仓库(Multirepo)」管理的问题。当然两个方式各有优缺点,而我们选择多工程单 Repo 时,能够带来一些管理上的简...

阿里云官方博客
8分钟前
1
0
Joomla 4具有可自定义的HTML电子邮件模板

Joomla 4大约每个月都会发布一个Alpha版本。上个月,我们得到了一个新的管理模板。 Joomla 4的最新版本是Alpha 12。 该版本的主要新特性是可定制的电子邮件模板。您将能够控制从您的网站发送...

六艺网络专注于Joomla
11分钟前
1
0
Idea配置

配置文件idea64.exe.vmoptions -Xms128m, 16 G 内存的机器可尝试设置为 -Xms512m (设置初始的内存数,增加该值可以提高 Java 程序的启动速度。 ) -Xmx750m, 16 G 内存的机器可尝试设置为 ...

行者终成事
13分钟前
2
0
大小仅1MB!超轻量级的人脸识别模型火爆Github

项目地址:https://github.com/Linzaer/Ultra-Light-Fast-Generic-Face-Detector-1MB 近日,用户Linzaer在Github上开源了一款适用于边缘计算设备、移动端设备以及 PC 的超轻量级通用人脸检测...

编程资源库
15分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部