【IE6.0 Bug总结之四】position:fixed无效问题

【IE6.0 Bug总结之四】position:fixed无效问题

      今天在IE6上遇到一个bug,本来想做一个消息提示框,让他在页面右上角停留一段时间后消失,这段时间内提示框随着页面的下拉一直出现在浏览器可见区的顶部,于是我用到了css的一个属性position:fixed,但遗憾的是在IE6下这个属性不起作用,悲剧的IE6,于是便找解决方案,现把最佳的解决方案拿出来与大家分享,或许不久的将来你能用上。

1、要实现的效果如下图:


这时弹出提示在浏览器最右上角可见区

 


这时浏览器向下滚动了一下,但要让弹出层保持在浏览器最右上角可见区

 

2、兼容的解决方案代码如下:

css代码如下

 1 .loading_tip { 
 2     position: fixed;
 3     _position: absolute;
 4     top: 10px; 
 5     right: 5px; 
 6     _bottom: auto; 
 7     _top: expression(eval(document.documentElement.scrollTop+10)); 
 8     background-color: #F0F0F0; 
 9     padding: 5px; 
10     border: #6FD65C solid 1px; 
11     z-index: 9999999; 
12 }
13  
14 /** 防止在拖动过程中出现抖动现象 **/
15 *html { 
16     background-image: url(about:blank); 
17     background-attachment: fixed; 
18 }
19  
20 .content{
21     height:1500px;
22 }

html代码如下

1 <div class="loading_tip">这是fixed的区域,休想让消失</div>
2 <div class="content">这是好多内容的区域,我要往下拖动了,上面的fixed的区域想跟我一起下来吗?</div>

这下好了,终于能在IE6上实现fixed效果了

转载于:https://www.cnblogs.com/stylering/archive/2012/11/09/2762067.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值