对于 IE6 也可以使用纯 CSS 来实现 position:fixed 的效果。直接上代码吧。
先是结构。
<div class="container">
我是IE6，使用 absolute 模拟 fixed.</br>
这里多多复制几个，效果明显。
</div>
<div class="fixed"></div>然后是 CSS。
body {
height:100%;
overflow-y:auto;
padding:0px;
margin:0px;
}
.container {
height:1800px;
background:#CCC;
}
.fixed {
position:fixed;
top:50px;
left:50px;
background:red;
height:50px;
width:50px;
}还有对于 IE6 来说，加一个单独的样式
<!--[if lte IE 6]>
<style type="text/css">
html {overflow-x:auto; overflow-y:hidden;}
.fixed {
position:absolute;
}
</style>
<![endif]-->原理就是对于 body 设置高度 100%，html 垂直方向上，超出高度给隐藏掉。然后里面的内容自己滚动，而 absolute 的相对于浏览器窗口的话，因为浏览器窗口就那么大，又不滚动，所以 absolute 看起来就 fixed 了。
但是这个有个问题，就是 所有设置了 absolute 和 relative 的元素，都会表现为 fixed 的，所以还是有副作用的。不过可以用来做遮罩层。
例子可以使用 IE6 浏览器访问。
No comments