【IE6.0 Bug总结之四】position:fixed无效问题
2012-11-09 10:05
162 查看
【IE6.0 Bug总结之四】position:fixed无效问题
今天在IE6上遇到一个bug,本来想做一个消息提示框,让他在页面右上角停留一段时间后消失,这段时间内提示框随着页面的下拉一直出现在浏览器可见区的顶部,于是我用到了css的一个属性position:fixed,但遗憾的是在IE6下这个属性不起作用,悲剧的IE6,于是便找解决方案,现把最佳的解决方案拿出来与大家分享,或许不久的将来你能用上。
1、要实现的效果如下图:
这时弹出提示在浏览器最右上角可见区
这时浏览器向下滚动了一下,但要让弹出层保持在浏览器最右上角可见区
2、兼容的解决方案代码如下:
css代码如下
html代码如下
这下好了,终于能在IE6上实现fixed效果了
今天在IE6上遇到一个bug,本来想做一个消息提示框,让他在页面右上角停留一段时间后消失,这段时间内提示框随着页面的下拉一直出现在浏览器可见区的顶部,于是我用到了css的一个属性position:fixed,但遗憾的是在IE6下这个属性不起作用,悲剧的IE6,于是便找解决方案,现把最佳的解决方案拿出来与大家分享,或许不久的将来你能用上。
1、要实现的效果如下图:
这时弹出提示在浏览器最右上角可见区
这时浏览器向下滚动了一下,但要让弹出层保持在浏览器最右上角可见区
2、兼容的解决方案代码如下:
css代码如下
.loading_tip { position: fixed; _position: absolute; top: 10px; right: 5px; _bottom: auto; _top: expression(eval(document.documentElement.scrollTop+10)); background-color: #F0F0F0; padding: 5px; border: #6FD65C solid 1px; z-index: 9999999; } /** 防止在拖动过程中出现抖动现象 **/ *html { background-image: url(about:blank); background-attachment: fixed; } .content{ height:1500px; }
html代码如下
<div class="loading_tip">这是fixed的区域,休想让消失</div> <div class="content">这是好多内容的区域,我要往下拖动了,上面的fixed的区域想跟我一起下来吗?</div>
这下好了,终于能在IE6上实现fixed效果了
相关文章推荐
- 项目中遇到的position:fixed;无效问题
- js,css三种方法解决IE6下position:fixed的Bug以及闪动问题
- IE6中position:fixed无效问题解决
- 移动端web页面使用position:fixed问题总结
- 【IE6.0 Bug总结之六】宽度100%问题
- 【IE6.0 Bug总结之七】图片底部空隙问题
- 项目中遇到的小问题,position:fixed无效的一种情况
- CSS表达式(expression)解决IE6 position:fixed无效问题
- 完美解决IE6不支持position:fixed的bug问题
- 解决android position fixed无效问题
- 移动端web页面使用position:fixed问题总结
- 完美解决CSS中position为fixed在IE6下无效的bug
- 【IE6.0 Bug总结之八】图片底部空隙问题
- 【IE6.0 Bug总结之三】div无法遮盖select问题
- 完美解决IE6下position:fixed的Bug;以及闪动问题
- 修正IE6不支持position:fixed的bug
- 解决 IE6 position:fixed 固定定位问题
- 【IE6.0 Bug总结之五】文字溢出bug(注释bug)
- 修正IE6不支持position:fixed的bug(转)
- 完美解决IE6不支持position:fixed的bug