今天小编跟大家讲解下有关CSS行为expression轻松实现IE6无抖动固定定位 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS行为expression轻松实现IE6无抖动固定定位 的相关资料,希望小伙伴们看了有所帮助。
概述: IE6不支持固定定位(position:fixed)是众所周知的事情 所以我们要想在IE6做出固定定位的效果就只能用JS 但是用js会出现“跳动”的效果 所以有没有不用JS而且不跳动的办法呢 这是怎么做到的呢 今天说说CSS中的行为expression。 什么是行为-expression: 就是CSS属性后面可以是一段JS表达式 CSS属性的值等于JS表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法 也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 为什么使用行为(expression)能解决问题: 因为CSS中使用expression只有IE才能识别。 实现方法: 在css中写入js代码: 复制代码代码如下: #backtop{ width: 40px; height: 45px; position:fixed; right: 0px; bottom: 10px; z-index: 9; //针对IE6 _position:absolute; _top:expression(eval(document.documentElement.scrollTop + 430)); border: none; overflow:hidden; } 这样一个 固定定位的问题解决了 但是还有问题 元素会跳动 这是为什么 IE6中的元素为什么会跳动的: 这是因为IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候 它将重置所有内容并重画页面 这个时候它就会重新处理css表达式 但是这是DOM结构是先于CSS展示出来 所以这会引起一个"抖动"bug 在此处固定位置的元素需要调整以跟上你的(页面)滚动 于是就会跳动 解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理css。因为是在重画之前处理CSS 它也就会同样在重画之前首先处理你的css表达式。这将让你实现完美的平滑的固定位置元素!然后我发现background-image无需一张真实的图片 设置成about:blank就行。 元素跳动的解决方法: 复制代码代码如下: body { //针对IE6在重画之前处理CSS _background: url(about:blank); _background-attachment: fixed; }来源:爱蒂网