ie6使用expression模拟fixed定位
|
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html{ _background:url(about:blank); /* 阻止IE6中闪动 , 把空文件换成about:blank , 减少请求 */ } /* 固定定位图层 */ .fixed { position:fixed; _position: absolute; width: 200px; height: 200px; background: red; top:0; left: 0; _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight); _left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth); } </style> </head> <body> <div class="fixed"></div> <div style="height:1500px"></div> </body> </htm> |
IE5 及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性， 也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。
以top为例：
documentElement.scrollTop 页面滚动条“卷”起来的高度值
documentElement.clientHeight 页面实际高度，包括padding
this.offsetHeight 元素实际高度，包括padding，scrollbar，border
documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight = bottom为0时，如果用top来实现应当取多少值
top:0; = _top:expression(documentElement.scrollTop);
bottom:0; = _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);
left:0; = _left:expression(documentElement.scrollLeft);
right:0; = _left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth);
注：尽量避免使用这种方式，因为这会产生大量计算，计算量轻松过万，对浏览器性能损耗很大，浏览器极容易死掉。
