您的位置:首页 > 其它

IE6不支持position:fixed解决方案

2016-05-14 15:29 429 查看
一个下雨的星期六,闲来无事听听窗外雨声,抿一口清茶!

废话不多说,做前端的朋友们都一定碰到IE6对position:fixed定位不支持的问题,虽然IE6即将被淘汰,但是以目前国内网络用户而言,依然是一庞大的用户群体,所以咱们不得不对此做兼容处理。

解决方式:用position:absolute来替代fixed,IE的CSS表达式(expression)来完美的实现ie6下position:fixed效果

代码(右侧顶部悬停):

.demo{
height: 100px;
width: 100px;
position: fixed;
top: 0;
right: 0;
_position: absolute;//兼容IE6
_top: expression(eval(document.documentElement.scrollTop));//ie6顶部悬停
}


代码(右侧顶部50%处悬停):

.demo{
height: 100px;
width: 100px;
position: fixed;
top: 50%;
right: 0;
_position: absolute;//兼容IE6
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));//ie6顶部50%处悬停
}


代码(右侧底部悬停):

.demo{
height: 100px;
width: 100px;
position: fixed;
top: 0;
_position: absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); //当然这是全的表达式,考虑到margin和padding的情况
}


代码(右侧顶部加某个元素高度悬停):

.demo{
height: 100px;
width: 100px;
position: fixed;
top: 0;
_position: absolute;
_top:expression(eval(document.documentElement.scrollTop+document.getElementById('abc').offsetHeight)); //右侧顶部+id为abc元素高度的位置悬停
}


当然网上搜索了一把,也有很多朋友分享了自己的一些新的方法;大家也可以参考,以下随便粘贴几条:
http://546704596.blog.163.com/blog/static/1142679582013477231091/ http://jingyan.baidu.com/article/c843ea0b94271a77921e4a4c.html http://www.cnblogs.com/hooray/archive/2011/05/20/2052269.html http://www.sjyhome.com/css/let-ie6-support-position-fixed.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息