完美解决IE6中fixed抖动问题的方法
我们可以通过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; /* 文件不存在亦可以,随便命名 */
}
完美解决IE6中fixed抖动问题的方法的更多相关文章
- 完美解决 IE6 position:fixed 固定定位问题
关于 position:fixed; 属性 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. pos ...
- jquery返回顶部和底部插件和解决ie6下fixed插件
(function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...
- 解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背
解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背 目录 解决代码 解决png图片在html中 解决png作为网页背景-css 1.解决PNG图片在IE6中背景不透明的CSS与JS代码 ...
- 解决IE中img.onload失效的方法
解决IE中img.onload失效的方法 - CoffeeCat's IT Blog - IT博客 http://www.cnitblog.com/CoffeeCat/archive/2008/02/ ...
- 完美解决IE6不支持position:fixed的bug
示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...
- js完美解决IE6不支持position:fixed的bug
详细内容请点击 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" co ...
- 解决IE6中 PNG图片透明的终极方案-八种方案!
“珍惜生命,远离IE6”,IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放弃了很多很炫的效果, ...
- 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...
- 解决ie6中png图片格式不兼容问题
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以 ...
随机推荐
- Android XML文件布局各个属性详解
第一常用类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android: ...
- 琐碎-hadoop2.2.0伪分布式和完全分布式安装(centos6.4)
环境是centos6.4-32,hadoop2.2.0 伪分布式文档:http://pan.baidu.com/s/1kTrAcWB 完全分布式文档:http://pan.baidu.com/s/1s ...
- IJKMediaFramework第三方库的使用
大多数做直播的时候使用 FFMpeg. IJKMediaFramework也是基于FFMpeg封装 使用起来比较简单,个人觉得如果有能力可以使用 FFMpeg , 使用 FFMpeg对 内存的占用比 ...
- python(6)-类
面向对象编程是一种编程方式,此编程方式的落地需要使用 "类" 和 "对象" 来实现,所以,面向对象编程其实就是对 "类" 和 "对 ...
- HUST 1017 Exact cover (Dancing links)
1017 - Exact cover 时间限制:15秒 内存限制:128兆 自定评测 6110 次提交 3226 次通过 题目描述 There is an N*M matrix with only 0 ...
- 钓鱼 贪心 end
#include<iostream> int m,n; int *p; int dis=0; int peo=0; int data[3][2]; int b[3][2]; int da[ ...
- Sublime Text 插件之常用20个插件
作为一个开发者你不可能没听说过 Sublime Text.不过你没听说过也没关系,下面让你明白. Sublime Text是一款非常精巧的文本编辑器,适合编写代码.做笔记.写文章.它用户界面十分整洁, ...
- js中call和apply的用法和区别
它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区别: obj.call(thisObj, arg1, arg2, ...); obj.apply(thisObj, [arg1 ...
- input 데이터의 자판입력모드의 한글/영문 자동전환, 영문고정 하는 방법 웹프로그래밍 팁
input 태그의 style 속성의 ime-mode 변경으로 한글/영문의 자동전환이나 영문만 입력이 되도록 할 수 있다. style="ime-mode:activ ...
- Ajax之数据连接信息捕获
connDB.properties: DB_CLASS_NAME=com.mysql.jdbc.Driver DB_URL=jdbc:mysql://127.0.0.1:3306/db_datab ...