修正IE6不支持position:fixed的bug
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候,遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友,一起BS我……但是对于大项目或商业网站,如果有用到这个属性的时候,是不可能直接无视的。
你是如何让position:fixed在IE6中工作的?
本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval
包裹你的语句。
如何解决“振动”的问题?
显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。
解决此问题的技巧就是使用background-attachment:fixed
为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!
这个方案并不是我提供的。我是在网上的某个地方读到这些的。如果你知道是谁原创了这个方法,请告诉前端观察。
我发现的另外一个小技巧是,你根本无需一个真实的图片!你可以使用一个about:blank
替代一个spacer.gif图片,而且它工作的同样出色。
CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 |
|
更新: 添加border、padding 和margin 支持!
Note: 如果你不需要支持margin,可以将所有的`parseInt`部分去掉。
Note: 我只在标准模式下进行了测试。
原文:修正IE6不支持position:fixed的bug
转载于:https://www.cnblogs.com/waters/archive/2011/06/22/2086553.html
修正IE6不支持position:fixed的bug相关推荐
- 完美解决IE6不支持position:fixed的bug
废话不多说,先看一下下面这段代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...
- 实现 IE6 支持 position fixed 的 CSS 属性
众所周知 IE6 不支持 position:fixed ,这个 bug 与 IE6 的双倍 margin 和不支持 png 透明等 bug 一样臭名昭著. 如何让 position:fixed 在 I ...
- iphone safari不支持position fixed的解决办法
最近一直在做移动web开发,开发过程中遇到了许多问题,mobile safari不支持position: fixed就是一件很头疼的事情.需求是这样的,许多pc web页面的导航都是固定的,比如goo ...
- 移动Web开发实践——解决position:fixed自适应BUG
在移动web中使用position:fixed,会踩到很多坑,在我之前的一篇文章<移动端web页面使用position:fixed问题总结>中已经总结了很多bug,但是在后续的开发中有关f ...
- ie8 不支持 position:fixed 的简单解决办法
今天发现使用 position:fixed 的页面在firefox下没有问题,在IE8下却不能正常显示,在网上找了找,有不少相关文章,但是不是不起作用就是太复杂,后来终于发现一个简单的解决办法,就是在 ...
- CSS的position:fixed的使用(固定不动的div)
前段时间,在做一个项目时需要使一个层相对于浏览器边框固定,那时用position:absolute试了下,发觉absolute是对网页边框而言的.后来,上网查了一些根据滚动条的移动,动态地改变left ...
- 关于 IOS5 使用 position:fixed 与 scrollTo 共存的 bug
背景描述:ios5 提出了支持 position:fixed ,于是乎大家觉得让浮动的图层固定在屏幕最下方容易多了,赶紧用上吧.可是呢...页面上又有好多地方需要用到 scrollTo 控制滚动条移动 ...
- 五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题
这个方法其实已经使用很久了,之前主要在嵌入式WebQQ等产品中用过,现在拿出来分享一下吧,是目前最简洁的方式来实现ie6的position:fixed; 失效bug,以及的其他方法的闪动问题,CSS代 ...
- 两种解决IE6不支持固定定位的方法
有两种让IE6支持position:fixed 1.用CSS执行表达式 *{margin:0;padding:0;} * html,* html body{ background-image:url( ...
最新文章
- java/javaee基础面试问题
- 分析 linux 日志文件,linux精讲|操作系统常见日志文件分析
- 推荐系统炼丹笔记:RecSys2020-SSE-PT解锁序列数据挖掘新姿势
- 2022Go安装goimports第三方库命令
- 【C++】Visual Studio教程(六) -更新Visual Studio
- 支付宝2017年个人账单明天发布,你小心脏准备好了吗?
- WebView 访问 url asset sd 网页
- 【iOS开发】企业版证书($299)In-House方式发布指南
- 能源消耗总量计算公式_电力消耗占比计算公式
- 避障车(L293D电机驱动)
- EXCEL表格中数字金额很大时后面零很多,如何设置直接以万元为单位显示,不显示后面的零
- 1160. 不容易系列之二
- HDU 4699(栈)
- 冰桶挑战引来了百度搜索冰桶算法
- 有什么软件android跟电脑连接无线,手机电脑连接的软件有哪些(安卓手机连接电脑的方法)...
- linux中shell命令行缩进,Linux下几个实用的bash命令 | 旺旺知识库
- 关于皓月GOM登录器配置器批量生成详细说明
- pandas dataframe rolling 移动计算
- 【八步拿捏】Aaqus有限元分析及减震复材建模计算/力学分析等多个SCI案例复现(附源码解析)...
- Linux和GNU系统的关系详解
热门文章
- js动态添加的元素,动作绑定
- server安装 sql 发生mof语法错误_WIN7系统无法安装server2008R2,提示语法MOF错误
- (132)FPGA面试题-Verilog实现格雷码转二进制
- System verilog随机函数$urandom输出8bit随机数
- c语言二叉树_linux学习第20节,二叉树的特性和插入、查询、删除等基本操作
- STM32F103 TIM4定时器
- php判断值是否为空然后定义,判断php变量是不是定义,是否为空
- java代码的接口_Java代码--简单接口的实现
- 深入理解ARM体系架构(S3C6410)---arm7,arm9,arm11区别
- centos7开放端口访问不了_CentOS7搭建GateOne,实现WebSSH