艺灵设计

全部文章
×

兼容ie6的悬浮窗

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2014-01-07 18:21:24 - 阅: - 评:0 - 积分:0

好久没有被各浏览器之间的bug折腾了,前几天一朋友找我要一个悬浮的代码。翻了翻之前整理过的源码后,解决了朋友的一时之需。今天就来说下关于这个悬浮的事情。

大家都知道ie6+外的浏览器基本上都是支持“position:fixed”的。但是,ie6那个怪胎是偏偏无视。也许当你看到此时,会跟我一样鄙视ie6,甚至会说这么垃圾的浏览器谁还用啊。确实,我也一直不明白用ie6的都是哪些奇葩的群体。既然ie6还没有被淘汰掉,那么学会解决ie6下的bug对自己来说,也是一个学习的过程。下面就附上解决ie6下悬浮窗的源码:

css样式:

  1. /*全部div宽度*/
  2. div{width:800px;}
  3. /*解决ie6下拉动滚动条时页面闪烁问题,当然,还有其它方法(略)*/
  4. html{background-attachment:fixed;background-image:url(a.jpg);}
  5. /*兼容普通浏览器*/
  6. .ie6_fix{position:fixed;z-index:999;_position:absolute;width:800px;height:50px;}
  7. /*ie6专有 顶:0;左:20%*/
  8. .ie6_fix_t{top:0;left:20%;background-color:rgb(153,153,153);_top:expression(eval(document.documentElement.scrollTop));}
  9. /*ie6专有 顶:100px;右:0*/
  10. .ie6_fix_r{top:100px;right:0;width:50px;height:300px;background-color:rgb(204,204,204);_top:expression(eval(document.documentElement.scrollTop)+100+"px");}
  11. /*ie6专有 顶:100px;左:0*/
  12. .ie6_fix_l{top:100px;left:0;width:50px;height:300px;background-color:rgb(102,102,102);_top:expression(eval(document.documentElement.scrollTop)+100+"px");}

模块内容:

在线演示
  1. <!--顶-->
  2. <div class="ie6_fix ie6_fix_t">top</div>
  3. <!--右-->
  4. <div class="ie6_fix ie6_fix_r">right</div>
  5. <!--左-->
  6. <div class="ie6_fix ie6_fix_l">left</div>
  7. <!--填充高度-->
  8. <p style="height:99999px;"></p>

点击上面的“在线演示”后,将链接粘贴到"IETester"中,可以看到ie6下确实是固定了。如图:

上面的样式中还添加有左与右的样式,只是在固定顶部的基础上进行用位置控制而已。也许此时,有人会想到固定底部的写法:直接写“bottom:0”就可以了吗?我只想说:“只有自己亲自去尝试才知道结果是什么。”事实上是不行的,那么究竟该如何写呢?再上源码:

css样式:

  1. /*ie6专有 底:0;左:20%*/
  2. .ie6_fix_b{bottom:0;left:20%;background-color:rgb(51,51,51);_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));}
转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/div/2014-01-07/142.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 悬浮窗 ie6 bug fixed

上一篇: 谈谈初学者应该如何学习div   下一篇: table表格那点事儿

评论区