原文:http://blog.istef.info/2008/04/13/css-position-fixed-for-ie6/
在 Firefox/Opera 等良好支持 W3C 标准的浏览器中,如果我们希望将某个元素固定在页面底部,我们可以给它指派这样的 CSS:
position: fixed; bottom: 0;
对于 IE7 来说,它虽然可以正确的将这个元素 fix 在底部,但它却错误的处理了水平方向的位置。对于这个问题,我们可以利用一个原有的 hack 来解决:
left: 50%; margin-left: -390px;
这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了,他们不懂得 position: fixed 属性,所以我们需要单独解决一下:
首先我们为这些浏览器单独创建一个样式表,我们可以利用条件注释语句,让 IE<7 的浏览器单独载入这个“多于”的样式表:
<!–[if IE lt 7]> <link rel=”stylesheet” href=”path/to/stylesheet/ie-stuff.css” type=”text/css” media=”screen” /> <![endif]–>
然后我们在这个 CSS 文件中,对这个需要固定在页面底部的元素添加 CSS 属性:
postion: absolute; bottom: auto; top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1);
这里事实上就是利用了 IE 中特有的 CSS 运算符 expression。在 expression 中我们可以利用 Javascript 计算出需要的 top 值,这样就达到了与 position: fixed 同样的效果。
这种方法原理上来说和以前的 Javascript 方案是相同的,但这种方法显然通用性更好一点。当然,如果您不介意用 Javascript 的话,实现同样的效果会更直观更简单一点。