ie6 position:fixed解决方案

(编辑:jimmy 日期: 2024/12/28 浏览:2)

可是要在IE6中实现固定效果,position: fixed;就不奏效了。
目前我所知的ie6下fixed的方案大概有纯css和expression+js两种,各有利弊。
1.纯css法
利用了ie6下html元素外面套的一个匿名元素,即 * ,利用选择器层级,可以定制ie6下的效果。代码如下

复制代码代码如下:
* html {
overflow-y: hidden;}/*只是定制垂直滚动fixed*/
* html body{
overflow-y: auto;
height: 100%;
}
* html #fixedbox{ /*把要固定的元素position设置为absolute */
position: absolute;
}

此法看似成本很低,其实有个显而易见的致命伤,就是ie6下所有position: absolute; 的元素都会被置为固定不动。于此,此法只能用于页面木有绝对定位的元素的时候。

2.js 法
其实此法原理也很简单,就是在ie6下利用js不断改变absolute的元素scrolltop值,已达到类似固定的效果。例如

复制代码代码如下:
#fixedbox{
position: fixed;
top: 250px;
/* for ie6 */
_position: absolute;
_top: expression(documentElement.scrollTop + 250 +”px”);
}

此法也有一个小问题,即滚动时会闪烁。
解决闪烁的办法也很简单,即给滚动元素的父元素(一般是body)设置一个background-image,并把background-attachment设置为fixed。
于是,综上,

复制代码代码如下:
#fixedbox{
position: fixed;
top: 250px;
}
/*for ie6 */
* html body{
background-image: url(about:blank);
background-attachment: fixed;
}
* html #fixedbox{
position: absolute;
top: expression(documentElement.scrollTop + 250 +”px”);
}

虽然expression会影响一定的性能,但这也不失为一种好的模拟fixed的方法。
ps:如果本身body中要设置background-image的,可以直接在html里写空的固定的背景图。

一句话新闻

微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。