手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >ie6 position:fixed解决方案
ie6 position:fixed解决方案
摘要:可是要在IE6中实现固定效果,position:fixed;就不奏效了。目前我所知的ie6下fixed的方案大概有纯css和expressi...

可是要在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 position:fixed解决方案】相关文章:

CSS表单元素垂直居中完美解决方案

firefox和谷歌不显示body背景图片的解决方法

IE中div被视频遮住(用embed来内嵌视频)的解决方法

DIV CSS解决不规则文字排版

ie placeholder属性的兼容性问题解决方法

ie6,ie7,ie8完美支持position:fixed的终极解决方案

img图片元素下多余空白解决方案

CSS样式:background-position的理解

常用的10种CSS BUG解决方法与技巧

ie6不兼容hover ie6 a hover属性失效解决办法

精品推荐
分类导航