支持IE6及其内核浏览器的顶部导航条固定定位的CSS代码

Jimdo代码

      经常看到各大网站会在页面顶部或底部放一个固定的漂浮导航条，如最近的新浪微博、腾讯微博及QQ空间及天涯论坛等，这个导航条在浏览器窗口上的位置是固定不动的，不随垂直滚动条的拉动而变化，这么做的好处是便于快速切换内容。只是有一点，除了天涯论坛以外，它们都不支持IE6及采用其内核的浏览器。虽然IE6必将被淘汰，但是中国人使用IE6的人群还是很庞大的，让IE6支持固定导航条，很困难吗？

      网上邻居研究了一些网站，又在网上搜索学习了相关内容，这种支持IE6浏览器的固定漂浮导航条，可以用js实现，也可以通过CSS来实现，本文就后一个方法做个简单介绍。

      在CSS position 属性的值中，有两个绝对定位，即“position:fixed”和“position:absolute”，简单的理解，前者是相对于浏览器窗口进行定位，后者是相对于static 定位以外的第一个父元素进行定位。教科书上是这么说的：

position 属性

值 描述

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

      IE6以上版本的IE浏览器及其他主流浏览器都是支持“position:fixed”的，但是IE6却不支持它。幸好，IE6 支持“position:absolute” 和 Internet Explorer 的CSS表达式(expression)。所以，对于别的浏览器，我们可以用“position:fixed” 进行固定定位，而对于IE6，我们可以用“position:absolute” 和CSS表达式，比如：

#top

{

/* 对于其他浏览器 */

position:fixed;

top:0px;
/* 对于 IE6 */
    _position: absolute;
    _top: expression(documentElement.scrollTop + "px");

}

      采用以上代码，顶部的导航条，在IE6情况下，确实固定在顶部了，但是，拉动垂直滚动条时，这个导航条有跳动现象，解决此问题的方法是使用“background-attachment:fixed”为body添加一个背景图片，强制页面在重画之前先处理CSS，而且这个图片可以是虚拟的，比如“background:url(任意名称)”。

body {background: url(about:blank); background-attachment: fixed;}