解决IE6下"position:fixed"(固定位置)的问题

沧海依粟 @ 2010-04-17 20:16:35   |  类归于： CSS   |   0 条评论  |  193次阅读

呵呵, 不知道现在纠结这个问题会不会太晚了.

如果我们想把某个元素固定在屏幕的某个位置, 我们首先想到的肯定是将该元素的 position 属性设置为 fixed, 然后再设置 top, left 等关于坐标的属性. 在 IE6 以上及其它对标准支持比较完美的浏览器上, 这样做就已经能完美达到我们的要求了, 但是 IE6 却不鸟这个值, 咋办? 网上有很多解决办法. 如使用 js 动态的调整位置, 也可以使用 IE 特有的 expression 属性(传说IE8已经不支持鸟).

使用 js 很容易解决此问题, 但是麻烦(其实也不麻烦, 主要还是我懒); 使用 expression 麻烦倒不是很麻烦, 但是有严重的性能问题. 要是只需要使用 CSS 就能解决该问题, 那就完美了. 方法总是有的: http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/给了我们趋于完美的解决方案. 代码如下:

假定我们要因定位置的元素 ID 为 fixedDiv, 距 top 为 100, 距 right 为 0, 则完整的代码如下:

#fixedDiv {
    position: fixed;
    top: 100px;
    right: 0px;
}

 

* html {
    overflow: hidden;
}

 

* html body {

    height: 100%;
    overflow: auto;
}

 

* html #fixedDiv {

    position: absolute;
    right: 17px; /* 此处多给17px, 否则在滚动条存在的时候, Div 会浮在滚动条之上*/
}

/* * html 是 IE6 CSS 的 hack */

具体解释可以参考原文. 但在这里, 需要提醒一下. 如果你的文档超过了一个屏幕的高度, 但是却发现滚动条不见鸟, 那很有可能是因为你将 body 下某个元素的 width 设置为了 100%. 正好把滚动条撑到了屏幕之外. 解决办法就是把 width: 100% 去掉(稍微有点猥锁).

其实这样也还是有不完美的地方, 比如窗口变小后, 横向的滚动条不会再出现了. 或者纵向滚动条可能会被撑到屏幕之外. 解决办法就是给 body 加上 width: 100%. 可是这样子也还是会有问题, IE6 在加载过程中, 会不断的去计算 html 的滚动条宽度. 有的时候我们会发现 body 的滚动条并不是在屏幕的最右边(或者最下边). 暂时还没有找到好办法去彻底解决此问题. 所以监听窗口的 onresize 事件, 当窗口大小变化后去设置 body 的高度和宽度. 这样, 如果已经使用了 js , 倒还不如使用 js 去不断调整元素的高度和宽度来的爽快. 纠结啊. IE6 真得有点让人小崩溃.

现在还没有评论,你有机会坐沙发哦.

发表一篇评论

呢称：(必填)  //Name(required)

Email 地址：(必填)  //Email Address(required)

网址：//Site URL

验证码：(必填) //Word Verification(required)

请在上面的文本框中输入你在图中看到的字母或数字(看不清楚验证码?点击这里换一个.)
//Please type the letters you see in the picture.(can't read it? try another!)