您现在的位置是：网站首页> 编程资料编程资料
ie6 position:fixed解决方案 _CSS教程_CSS_网页制作_
2021-09-08
901人已围观
简介 当前主流浏览器中，chrome，firefox，ie7,8等想要固定一个元素位置，不随内容的滚动而滚动，众所周知，css中position: fixed;即可解决。
可是要在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里写空的固定的背景图。
目前我所知的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里写空的固定的背景图。
相关内容
- firefox下有滚动条时页面抖动问题的解决方法_CSS教程_CSS_网页制作_
- CSS滤镜同时过滤文字的问题的解决方法_CSS教程_CSS_网页制作_
- 全面兼容ie6,ie7,ie8,ff的CSS HACK写法_浏览器兼容教程_CSS_网页制作_
- DIV+CSS布局也需要注意的SEO原则_Div+CSS教程_CSS_网页制作_
- IE6盒子模型没问题 详测双倍边距 _CSS教程_CSS_网页制作_
- CSS hover不起作用的原因 _CSS教程_CSS_网页制作_
- CSS长度单位 px和pt的区别 _CSS教程_CSS_网页制作_
- css自动换行 防止撑破div影响排版 _CSS教程_CSS_网页制作_
- z-index ie6下的解决方案 _CSS教程_CSS_网页制作_
- line-height 和 vertical-align 行高与行对齐精解 （图文） _CSS教程_CSS_网页制作_
