IE6下position:fixed不支持问题及其解决方式
解决 方式 支持 及其 position IE6 fixed 问题
2023-09-14 09:08:13 时间
IE6有诸多奇葩,不支持position:fixed就是当中之中的一个。所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题。解决方式是用Ie6的hack。
*html {/* 仅仅有IE6支持 */
background-image: url(about:blank);
background-attachment: fixed; /* 固定背景 */
}
#box {
/* 非IE6浏览器使用固定元素 */
position: fixed;
top: 0;
left: 0;
/* IE6改为绝对定位,并通过css表达式依据滚动位置更改top的值 */
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
}
这里还须要解决的是“抖动”的问题,由于当你滚动滚动栏的时候expression下的样式一直在又一次计算而且运行css,会产生延迟的抖动。而在使用固定背景之后,在滚动的时候先运行了css,再又一次计算网页,所以不会产生抖动的现象。以下是固定究竟部的代码,须要细致看一下:
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
PS:在网上看到expression的诸多弊病,也是雅虎34条里面竭力避免使用css表达式的一个重要原因,摘引一段话:表达式的问题就在于它的计算频率要比我们想象的多。不不过在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要又一次计算一次。给CSS表达式添加一个计数器能够跟踪表达式的计算频率。在页面中随便移动鼠标都能够轻松达到10000次以上的计算量。由此可见一斑。
相关文章
- 消息队列如何解决消息积压问题
- 对于懒加载问题简单的解决方式
- 移动端制作的常见问题及解决方法
- vs2015下C4819该文件包含不能在当前代码页(936)中表示的字符问题解决
- 解决_系统管理员已阻止这个应用(方法)
- 后端Long类型传到前端精度丢失的正确解决方式
- 成功解决ModuleNotFoundError: No module named ‘torchtext.legacy‘
- 成功解决ValueError: cannot convert float NaN to integer
- 成功解决SyntaxError: (unicode error) ‘unicodeescape‘ codec can‘t decode bytes in position 0-1: malformed
- 成功解决调用密钥报错4001 加密方式错误
- 已解决:不小心卸载pip后(重新安装pip的两种方式)
- 30秒,2种方法解决SQL Server的内存管理问题
- 【Windows远程桌面】RDP Wrapper 监听器状态为 Not listening [not supported] 的解决方法(亲测可用)
- Leetcode 806. 写字符串需要的行数(可以,已解决)
- 虚拟机中ubuntu不能联网问题的解决——NAT方式
- QT中文显示乱码解决方式
- Cocos2d-x多语言支持解决方式
- Matplot中文乱码完美解决方式
- Microsoft Visual C++ Runtime Library Runtime Error解决的方式
- HT for Web嵌入QtWebKit的client解决方式
- 常见浏览器兼容性问题与解决方式
- 【问题解决】HOST_JUJU_LOCK_PERMISSION 。。
- Win10应用商店提示0x80070422解决方法
- SpringMVC Ajax返回的请求json的方式来解决在中国字符串乱码问题
- 有趣-如何解决递归过多导致的栈溢出
- 完美解决ubuntu18.04启动CARLA后的问题:~/carla$ ./CarlaUE4.sh
- 远程服务器证书过期怎么解决,关于演示win7远程桌面证书过期的具体操作方式...