01月04, 2012

让IE6完美支持position:fixed

position用来定位,它的几个取值和含义相信大家都知道,以下根据w3school的解释给大家复制一下,具体如有不清楚,希望大家不要懒哟,自己动手试一下就明白了。

static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

inherit:规定应该从父元素继承position 属性的值

absolute:生成绝对定位的元素,相对于static 定位以外的第一个父元素进行定位。

fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。

relative:生成相对定位的元素,相对于其正常位置进行定位。 今天咱们主要说的是IE6对于fixed不支持的解决方案。如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩放和滚动条的滚动而变化,那个肯定是想到的用position:fixed生成绝对定位,但是当所有浏览器都调好了,你正HAPPY时,IE6出现了,顿时头痛病又犯了。那么如何解决呢?

当然JS方式也是可以的(个人觉得有点大材小用,所以不在此做阐述了),咱们主要讲一下IEhack方式来模拟解决,主要有两种方法:

一:利用expression

1)/ 除IE6浏览器的通用方法,左上定位,也可以自己加上偏移像素值 /

.ie6fixedTL{position:fixed;left:0;top:0}

/ IE6浏览器的特有方法 /

/ 修正IE6振动bug /

  • html, html body{background-image:url(about:blank);background-attachment:fixed}/ 这个解决了IE6下的抖动问题*/

*html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}

2)/ 除IE6浏览器的通用方法,右下定位,也可以自己加上偏移像素值 /

.ie6fixedBR{position:fixed;right:0;bottom:0}

/ IE6浏览器的特有方法 /

/ 修正IE6振动bug /

  • html, html body{background-image:url(about:blank);background-attachment:fixed}/ 这个解决了IE6下的抖动问题*/

*html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

二: 单独为IE设置样式的HACK (推荐,这个比较简单方便)

.posfix{border:1px solid #000;position:fixed;right:30px;top:120px}

希望对大家有用^_^

本文链接:https://75team.com/post/让ie6完美支持positionfixed.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。