上一篇
下一篇
IE6 css模拟实现position:fixed
日期:2011-05-13作者:woniu
IE6不支持position:fixed很不方便，但是可以在模拟实现。
IE窗口内容的滚动条，一般出现body元素上，不是html元素。
IE设置position:absolute时，如果父元素都没有设置position属性，那就是相对html元素定位。
Example Source Code
//大多数时候忽略也能工作,去掉html滚动条,隐藏超出窗口的内容
html{overflow:hidden;}
//重要,body充满窗口,并显示滚动条
body{height:100%;overflow:auto;}
//要fixed的对象,这里假设id为aim
#aim {position:absolute;width:10px;height:10px;background:#333;left:10px;top:10px;}
此时拉动滚动条,body滚动,html固定,aim将在窗口的某个位置固定下来。
因为webkit、gecko和ie7+等都支持position:fixed,可以用ie6的css hack写成。
Example Source Code
html{_overflow:hidden;}
body{height:100%;_overflow:auto;}
#aim {position:fixed;_position:absolute;width:10px;height:10px;background:#333;left:10px;top:10px;}
IE窗口内容的滚动条，一般出现body元素上，不是html元素。
IE设置position:absolute时，如果父元素都没有设置position属性，那就是相对html元素定位。
Example Source Code //大多数时候忽略也能工作,去掉html滚动条,隐藏超出窗口的内容
html{overflow:hidden;}
//重要,body充满窗口,并显示滚动条
body{height:100%;overflow:auto;}
//要fixed的对象,这里假设id为aim
#aim {position:absolute;width:10px;height:10px;background:#333;left:10px;top:10px;}
此时拉动滚动条,body滚动,html固定,aim将在窗口的某个位置固定下来。
因为webkit、gecko和ie7+等都支持position:fixed,可以用ie6的css hack写成。
Example Source Code html{_overflow:hidden;}
body{height:100%;_overflow:auto;}
#aim {position:fixed;_position:absolute;width:10px;height:10px;background:#333;left:10px;top:10px;}
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论