加载中…ie6实现fixed
(2011-04-07 14:20:06)
标签：
fixedie6兼容定位absoluteexpressionpositionit |
分类： CSSie6 |
最近要做一个旅游的专题网站，前几天看了layout，感觉要用position:fixed来做，但是ie6不支持，寻求解决方案：
百度得到的方案有：
一、Expression
_top:expression_r(documentElement.scrollTop + 数值 + "px");
也有用document.body.scrollTop的，区别是这句声明：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop 来代替;
document.documentElement.scrollTop中documentElement 对应的是 html 标签;
document.body.scrollTop 中 body 对应的是 body 标签。
二、Absolute
1、用position:absolute;来解决IE6的问题，然后写js监视滚动条来控制元素的定位。
2、我觉得很棒的，应该推广的一种方法：
首先要理解：fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。
所以如果能将ie6的元素根据<html>绝对定位不就行了么，<body>怎么滚都随它。那怎么定位到<html>上面呢?
看看官方文档怎么解释position定位：
刚不是说滚动条是body的吗？如果按照理论上讲，应该是这样才对：
滚动条是body的，那么就应该在html里面才对，right:30px应该包含滚动条，定位的元素应该距离滚动条30-17px=13px的距离。假如right:10px，那么就应该叠在滚动条上面，像这样：
第一个图是在Firefox中用fixed定位实现的，后两个图是用ie6然后加
但是虽然实现了类似fixed的效果，但是出现了这样一个现象：
html出现了个滚动条，因为body定了高度，然后溢出就显示，html会出现个滚动条来撑它，所以要加这句：
来删除右侧多余的滚动条。一切就perfect啦。
参考页面：http://sofish.de/991 http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/
百度得到的方案有：
一、Expression
_top:expression_r(documentElement.scrollTop + 数值 + "px");
也有用document.body.scrollTop的，区别是这句声明：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop 来代替;
document.documentElement.scrollTop中documentElement 对应的是 html 标签;
document.body.scrollTop 中 body 对应的是 body 标签。
二、Absolute
1、用position:absolute;来解决IE6的问题，然后写js监视滚动条来控制元素的定位。
2、我觉得很棒的，应该推广的一种方法：
<!--[if
IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
</style>
<![endif]--> 首先要理解：fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。
所以如果能将ie6的元素根据<html>绝对定位不就行了么，<body>怎么滚都随它。那怎么定位到<html>上面呢?
看看官方文档怎么解释position定位：
语法：
position : static | absolute | fixed | relative
取值：
static :默认值。无特殊定位，对象遵循HTML定位规则
absolute :将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative :对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
当元素absolute的时候，如果不存在定位了的父元素，那么元素相对于body定位。
而fixed定位的时候直接相对于html，即窗口定位，所以不怕它滚动条滚动。
我们拉动滚动条的时候，内容都会随着窗口滚动；这时滚动的是body。如果让绝对定位的父级元素定为body，刚我们需要固定的某个模块将会固定在网页的某个位置，而不是固定在窗口的某个位置。
但是，问题又来了，在firefox中，html与body之间的介限貌似不明确，加入定义了fixed后，right:30px;那么将是隔开滚动条的宽度17px+30px，如图所示：刚不是说滚动条是body的吗？如果按照理论上讲，应该是这样才对：
滚动条是body的，那么就应该在html里面才对，right:30px应该包含滚动条，定位的元素应该距离滚动条30-17px=13px的距离。假如right:10px，那么就应该叠在滚动条上面，像这样：
第一个图是在Firefox中用fixed定位实现的，后两个图是用ie6然后加
body{height:100%;overflow:auto;}实现的，效果不错，跟预期的一样。但是虽然实现了类似fixed的效果，但是出现了这样一个现象：
html出现了个滚动条，因为body定了高度，然后溢出就显示，html会出现个滚动条来撑它，所以要加这句：
html{overflow:hidden;}来删除右侧多余的滚动条。一切就perfect啦。
参考页面：http://sofish.de/991 http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/
喜欢
0
赠金笔
前一篇：JavaScript缓动效果
后一篇：js改变动态背景颜色