CSS,实现IE6固定定位及解决"抖动"的原理
虽然现在网上有许多用JS或JQ封装的函数,用于实现的兼容IE6的固定定位,但似乎有点大材小用,其实可以用CSS的expression解决:
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
如上设置后会出现一个问题,固定的元素背景在滑动会抖动,解决方案:
* html{ background-image:url(about:blank); background-attachment:fixed; }
完整的CSS代码:
* html{ background-image:url(about:blank); background-attachment:fixed; } #nav{ position:fixed; top:0; left:0; _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); }
需要注意的是:
*html{ background-image:url(about:blank);background-attachment:fixed;}
由于IE的一个多步渲染进程。当滚动或调整浏览器大小时,该进程将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上页面的滚动,于是就会“跳动”。
解决办法就是使用background-attachment:fixed
为body或html元素添加一个background-image。
这会强制页面在重画之前先处理CSS。
因为是在重画之前处理CSS,故在重画之前首先处理你定义的CSS表达式。从而实现完美的平滑固定!
无需一个真实的图片!你可以使用一个about:blank
替代一个spacer.gif图片,而且它工作的同样出色。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库