创建完美兼容IE6的固定导航

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

下面是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,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“抖动”。

解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这 就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!

然后我发现background-image无需一张真实的图片,设置成about:blank就行了

OK,完美解决!

原文地址:http://www.cssdashi.com/browser-compatibility/%E5%88%9B%E5%BB%BA%E5%AE%8C%E7%BE%8E%E5%85%BC%E5%AE%B9ie6%E7%9A%84%E5%9B%BA%E5%AE%9A%E5%AF%BC%E8%88%AA.html