手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

CSS Position Fixed for IE6

首页 > Misc >

我对CSS的了解少之又少,还好公司有美工,非常精通这些。但偶尔在自己写的时候可就没有人帮助了。所以,看到点资料,都会想着记下来。。

想来司徒正美的英文比我好多了,他还能经常去国外的网站,我就不行。。。

以下就来自他的博客了:

逛mootools核心成员Thomas Aylott的 博客看到,不过有点标题党了,实际效果并没有那么灵光,只是定义四个类,分别用来固定视口的上下左右。很遗憾,它无法解决与 top,bottom,left,right并用的问题(见例子)。它利用到IE8已经废弃的expression来计算页面的大小,从而固定我们想固定 的元素。里面用到一技巧,就是给html或body元素添加一张背景图片,并设置background-attachment:fixed,用于强制在页 面重绘之前执行CSS,也就是执行它里面的expression。另,我们也不需要一张真的图片,我们给它一个about:blank命令就可以,就像平 时对付链接一样,仅仅就是想要一个hover效果非得塞给它一个href。

CSS代码
  1. .fixed-top    {position:fixed;bottombottom:auto;top:0px;}  
  2. .fixed-bottombottom {position:fixed;bottombottom:0px;top:auto;}  
  3. .fixed-left   {position:fixed;rightright:auto;left:0px;}  
  4. .fixed-rightright  {position:fixed;rightright:0px;left:auto;}  
  5.   
  6. * html,* html body   {background-image:url(about:blank);background-attachment:fixed;}  
  7. * html .fixed-top    {position:absolute;bottombottom:auto;top:expression(eval(document.documentElement.scrollTop));}  
  8. * html .fixed-rightright  {position:absolute;rightright:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)));}  
  9. * html .fixed-bottombottom {position:absolute;bottombottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}  
  10. * html .fixed-left   {position:absolute;rightright:auto;left:expression(eval(document.documentElement.scrollLeft));}  
原文中还有例子,而且用他的话来说:要真正解决IE6的这个bug,就需要用到Dean Edwards大神的IE7.js。我是没用过啦。。。。毕竟不做前端

原文来自于:http://www.cnblogs.com/rubylouvre/archive/2009/11/14/1603113.html

 




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: css

« 上一篇 | 下一篇 »

只显示10条记录相关文章

Rel与CSS的联合使用 (浏览: 24818, 评论: 2)
CSS中media标签的作用 (浏览: 24536, 评论: 0)
9 个基于JavaScript 和 CSS 的 Web 图表框架 (浏览: 24333, 评论: 0)
好东西,不得不贴,继续上传两个文件 (浏览: 23172, 评论: 0)
CSS背景 (浏览: 22963, 评论: 0)
Table2CSS Converter (浏览: 22957, 评论: 3)
CSS让你的IE浏览器崩溃 (浏览: 21051, 评论: 0)
CSS透明属性详解 (浏览: 20315, 评论: 0)
写HTML和CSS的新方法 (浏览: 18864, 评论: 1)
【酷】Ultimate CSS Gradient Generator (浏览: 18441, 评论: 0)

发表评论

评论内容 (必填):