ie8对fixed的支持较差

使用了一段时间的IE8，发现IE8对fixed属性支持较差。　在ieTest下测试又比用ie8看强多了

IE版本：8.0.6001.xxx，最初发现是切割出来的页面（无任何脚本）我预览的时候，滚动鼠标中轮　感觉页面像水波粼粼在那起波纹，在FF、chrome、opera下看是感觉很好的，特别是在opera下看，那种平滑的感觉最舒服。

装了IE8的可以点击这里：http://labs.aoao.org.cn/demo/effect/vista/aero/

chrome、ff(可能装的插件较多)看这个页面效果都不是很好，感觉有些卡，opera(9.6.4中文版)下有很好的效果。

我那个切割出来的页面，双核CPU在鼠标中轮滚动的瞬间可以高达40%--70%。

原因我觉得有两个，整个页面有一张很大的背景（没有使用fixed）　头部导航在ie7+及其它浏览器用了fixed属性，按下f12然后更改顶部导航的fixed属性，CPU消耗少了一些--降到了35%

如果把大背景去掉，保留顶部的属性fixed　CPU消耗比去掉大背景要多---大概是40%左右。两都都去掉，基本上感觉不出来卡的效果。

如果你的使用的是IE8，那你可以去进入QQ空间换一个大背景然后滚动你的鼠标中轮　　然后感受一个“水蛇”的效果吧。(顶部导航可以点击右侧的一个箭头显示或隐藏)

 

查看苏小沈雨的CSS帮助文档，可以找到：

position版本：CSS2　 兼容性：IE4+ NS4+　继承性：无

position : static | absolute | fixed | relative

取值：

static	:	默认值。无特殊定位，对象遵循HTML定位规则
absolute	:	将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed	:	未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative	:	对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

说明：

检索对象的定位方式。
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
内容的尺寸会根据布局确定对象的尺寸。例如，设置一个 div 对象的 height 和 position 属性，则 div 对象的内容将决定它的宽度( width )。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 position 。

absolute与页面中的元素是否加了回车也有关系。

如果切割出来的结构如下：

<div class="a"><div class="b">xxxx</div></div>

如果改为<div class="a">

<div class="b"></div>

</div>　写脚本的时候很多时间希望结构清晰，使用一些编辑器进行格式化后将发现出现很多奇怪的问题，特别是在浮动和相对定位时某一行只放了一个列表，同行的其它列表被挤到下一行去了。

而且position也与获取网页位置有关。记录一下 "JavaScript获取页面宽度高度的方法"(转载)

HTML里是document.body
XHTML里是document.documentElement
Microsoft^® Internet Explorer 6 的新增内容

当你使用 !DOCTYPE 声明指定标准兼容模式的时候，此对象将不再代表文档内容所渲染的整个表面。该对象当然可从其内容中获得其大小，但你也可以像 div 对象那样精确设置其大小。

也就是说在HTML4.0标准下用document.body，在XHTML标准下就要换成 document.documentElement。XHTML下document.body仅仅表示body对象，而不能代表文档内容所渲染的整个表 面。HTML下document.body.clientHeight表示浏览器的可视高度，XHTML下则是 document.documentElement.clientHeight。document.body.clientHeight在XHTML下仅 表示body的可视高度。在HTML4.0下用document.body.scrollTop；而在XHTML下则是 document.documentElement.scrollTop,之前的document.body.scrollTop是恒为0的。

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth(包括边线的宽)
网页可见区域高：document.body.offsetHeight(包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop(IE7无效)
网页被卷去的左：document.body.scrollLeft(IE7无效)

网页被卷去的高：document.documentElement.scrollTop(IE7有效)

网页被卷去的左：document.documentElement.scrollLeft(IE7有效)
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

相对于窗口左上角的X：window.event.clientX

相对于窗口左上角的Y：window.event.clientY
相对于整个页面的X：window.event.X
相对于整个页面的Y：window.event.Y

PS ：对于IEdocument.body.scrollTop(IE7无效)解决方法参照

兼容Safari,Chrome,IE6,IE7,IE8,Firefox2(FF2),Firefox3(FF3)的scrollTop（滚动条高度）

ocument.body.scrollTop
就是滚动条顶部到网页顶部的这段距离
window.pageYOffset是NS专用属性，它的含义和IE下的document.body.scrollTop一样

var scrollTop =   document.documentElement.scrollTop || window.pageYOffset + "px";

以上内容转载自：白军辉