您现在的位置是:网站首页> 编程资料编程资料
ie6 position:fixed解决方案 _CSS教程_CSS_网页制作_
2021-09-08
953人已围观
简介 当前主流浏览器中,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_网页制作_
点击排行
本栏推荐
-
魔兽世界TBC黑庙三脸打断高亮提醒WA 支持进入P2后提示下一棒打断_网络游戏_游戏攻略_
-
cf无条件领全新雷神活动地址2022 CF2月1日大年初一活动网址_网络游戏_游戏攻略_
-
魔兽世界tbc怀旧服团本装备交易倒计时wa 支持通报/可自定义设置时间间隔_网络游戏_游戏攻略_
-
魔兽世界9.2初诞者圣墓boos黑伦杜斯炸圈WA 高亮监控炸圈时间_网络游戏_游戏攻略_
-
魔兽世界tbc怀旧服T6双本黑暗神殿和海山开门任务流程_网络游戏_游戏攻略_
-
炉石传说乱斗疯狂的冬幕节首胜卡组攻略 乱斗疯狂的冬幕节卡组推荐2021_网络游戏_游戏攻略_
-
炉石传说奥妮克希亚谜题1-8关解谜攻略 晨拥谜题攻略大全_网络游戏_游戏攻略_
猜你喜欢
- 魔兽世界TBC黑庙三脸打断高亮提醒WA 支持进入P2后提示下一棒打断_网络游戏_游戏攻略_
- cf无条件领全新雷神活动地址2022 CF2月1日大年初一活动网址_网络游戏_游戏攻略_
- 魔兽世界tbc怀旧服团本装备交易倒计时wa 支持通报/可自定义设置时间间隔_网络游戏_游戏攻略_
- 魔兽世界9.2初诞者圣墓boos黑伦杜斯炸圈WA 高亮监控炸圈时间_网络游戏_游戏攻略_
- 魔兽世界tbc怀旧服T6双本黑暗神殿和海山开门任务流程_网络游戏_游戏攻略_
- 炉石传说乱斗疯狂的冬幕节首胜卡组攻略 乱斗疯狂的冬幕节卡组推荐2021_网络游戏_游戏攻略_
- 炉石传说奥妮克希亚谜题1-8关解谜攻略 晨拥谜题攻略大全_网络游戏_游戏攻略_