让IE6兼容网页固定导航条（浮动导航）的方法分享

2012年网页设计最流行的元素莫过于固定导航，最前端的设计技术莫过于HTML5和CSS3，在IE7及以上浏览器、火狐、Chrome、Safari等主流浏览器中，设计师们可以使用position:fixed;，配合代码：top:0px; left:0px;可轻松实现固定层效果，然而，IE6并不支持这种效果，怎么解决呢？先看看这段代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>IE6 position:fixed bug www.5icool.org</title>
<style>
*{padding:0; margin:0;}
p{height:2000px;}
#gs{ border:1px solid #000; position:fixed; right:30px; top:120px;}
</style>
<!–[if IE 6]>
<style type=”text/css”>
html{overflow:hidden}
body{height:100%;overflow:auto}
#gs{position:absolute}
</style>
<![endif]–>
</head>
<body>
<div id=”rightform”>
<p>www.5icool.org</p>
<input id=”gs” name=”gs” type=”text” value=”" />
</div>
</body>
</html>

以上这段代码在网上很常见，通过设置html{overflow:hidden}和body{height:100%;overflow:auto}来实现ie6下position:fixed效果，但这种办法有个缺陷，那就是：这会使页面上原有的absolute、relation都变成fixed的效果，效果很不友好，可以自己去试验一下。

下面是IE6实现固定导航的最终代码：

/* IE6浏览器的特有方法 */
* html,* html body{background-image:url(about:blank); background-attachment:fixed}/* 修正IE6抖动bug */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}/* 固定在左上角的固定层 */
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}/* 固定在右下角的固定层 */

具体怎么使用呢？请看实例：比如我要建立一个左上角固定的导航，且距离顶部100px，距离左边10px，CSS代码可以这样写：

* html,* html body{background-image:url(about:blank); background-attachment:fixed}/* 修正IE6抖动bug */
.topleft{position:fixed; top:100px; left:10px; _position:absolute; _left:expression(eval(document.documentElement.scrollLeft)+10); _top:expression(eval(document.documentElement.scrollTop)+100)}/* 前缀“_”只能在IE6浏览器下识别 */

何为抖动BUG？

IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。这会引起一个丑陋的“抖动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“抖动”。