实现IE6 position:fixed效果：CSS行为表达式expression

phpvar · 发表于 2014-12-16 14:25:50

除了ie6，其它浏览器都能很好支持css属性：position:fixed，利用CSS行为表达式expression实现IE6 position:fixed效果，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{margin:0;padding:0;}
body{font:12px "Microsoft YaHei"}
ul,li{list-style:none;}
.nav{width: 100%;line-height: 50px;text-align: center;position: fixed;left: 0;bottom: 50%;background-color: #0080FF;}
*html .nav{position:absolute;bottom:auto;top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2))}
</style>
</head>
<body style="height:2000px;">
<div class="nav">固定位导航</div>
<script>
</script>
</body>
</html>

复制代码

代码中使用的*html是只能被ie6识别的hack写法，另外*+html是只能被ie7识别的hack写法， html前可加一个空格或不加都有效！当有多个针对ie6的属性时，用这种hack写法比每一个属性都加下划线_的写法要方便点，用哪种hack写法纯属看个人喜好。

值得注意的是expression(eval()) 还要额外加上eval关键字，否则对应css expression表达式不会生效！

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

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

background-image无需一张真实的图片，设置成about:blank就行了

/* 修正IE6振动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}

复制代码

		自动登录	找回密码
密码			注册帐号