IE6不支持position:fixed解决方案
2016-05-14 15:29
429 查看
一个下雨的星期六,闲来无事听听窗外雨声,抿一口清茶!
废话不多说,做前端的朋友们都一定碰到IE6对position:fixed定位不支持的问题,虽然IE6即将被淘汰,但是以目前国内网络用户而言,依然是一庞大的用户群体,所以咱们不得不对此做兼容处理。
解决方式:用position:absolute来替代fixed,IE的CSS表达式(expression)来完美的实现ie6下position:fixed效果
代码(右侧顶部悬停):
代码(右侧顶部50%处悬停):
代码(右侧底部悬停):
代码(右侧顶部加某个元素高度悬停):
当然网上搜索了一把,也有很多朋友分享了自己的一些新的方法;大家也可以参考,以下随便粘贴几条:
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
废话不多说,做前端的朋友们都一定碰到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
相关文章推荐
- 【VS开发】C++线程安全
- LR监控Apache性能
- 空值处理
- 代理服务器和网络地址转换NAT
- 2016"百度之星" - 资格赛(Astar Round1)
- Git 版本回退
- 大道至简第五章读后感
- [置顶] 登陆,猜数字小游戏
- 关于Android中两个Activity之间为什么采用Intent封装意图的简介
- onActivityForResult
- 什么是基线(Baseline)
- sqlalchemy多对多关系实现
- 大道至简第五章读后感
- android开源框架总结
- ZigBee学习笔记——ZStack的架构
- for循环
- java字符编码
- SSM框架整合小结
- miRNA特点
- 在ASP.NET 2.0中操作数据之四十六:使用SqlDataSource控件检索数据