收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 39506|回复: 33

[教程] 在ie6下实现position-fixed的效果

[复制链接]
发表于 2009-5-27 22:28:05 | 显示全部楼层 |阅读模式
[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统:Windows]

我喜欢position:fixed,它很酷。
但ie6总不支持它,所以用其他的属性来模拟(这个模拟在主流浏览器中都兼容,所以其他浏览器也不需要分开写position:fixed了)。
看效果先:

 提示:您可以先修改部分代码再运行



这是基于这种方法做的对联效果:

 提示:您可以先修改部分代码再运行



原理如下:

 提示:您可以先修改部分代码再运行



把框框的高宽都扩大到100%,然后将雷打不动的文字定个位就行了。

评分

参与人数 1威望 +3 收起 理由
greengnn + 3 我很赞同

查看全部评分

发表于 2009-6-4 10:59:53 | 显示全部楼层
从某一方面说,这个的确解决了 fixed 问题,

可是你要知道,当你把body,html高度限制后, 你就会发现N多问题。

比如:我要用脚本获取body的高度,然后做一个遮罩层,此时却不能获取真实的高度。

在实际项目中,很多时候需要用脚本对body和html的高度控制,经常需要获取body的高度,所以这个方法会引发的问题可想而知。

个人的一点见解。
回复 支持 反对

使用道具 举报

发表于 2009-6-4 11:59:18 | 显示全部楼层

回复 4# comasp 的帖子

有道理,这个问题我也遇到了,想了好久都找不到解决的办法,到现在还在寻找这方面的解决方法,希望有高手能帮忙解决下!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-4 15:41:40 | 显示全部楼层

回复 4# comasp 的帖子

谢谢你的讨论,因为使用了这样的方式,同样,我们也遇到了这样的问题。
看看下例demo是否能符合你的要求。

 提示:您可以先修改部分代码再运行



另外针对遮罩的问题(大概是做lightBox吧),个人觉得纯css法(不包括其显示/隐藏)将更适合。
回复 支持 反对

使用道具 举报

发表于 2009-6-4 16:29:48 | 显示全部楼层
body的高度依然无效,只能取div的高度。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-4 16:43:11 | 显示全部楼层
我从body需要的高度无非两种:
1. 页面高度
2. 窗体显示高度

个人觉得值从哪里取来并不重要,只要满足我的需求就行了。
回复 支持 反对

使用道具 举报

发表于 2009-6-4 21:38:08 | 显示全部楼层
这个方法也很久了吧
最初在sina博客看到
研究一番
发现是用div模拟body
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-4 22:53:42 | 显示全部楼层
恩,可是很多帖子提出过相关的问题,而我在这里又没有翻到相关的帖子,所以发一个,有个相对详细的解答对于新手的理解应该很有帮助。
以后也不用一个个去做解释说明了。
回复 支持 反对

使用道具 举报

发表于 2009-6-4 23:15:51 | 显示全部楼层
我一般做法是ie7,ff下使用fixed.
ie6下利用hack使用absolute模拟。

这种模拟法还有一个小问题就是模拟的fixed层可以盖住滚动条。所以有时候做某些效果的时候也会有影响。
回复 支持 反对

使用道具 举报

发表于 2009-6-4 23:17:14 | 显示全部楼层
原理说明那个很不错,可以让人一下明白
回复 支持 反对

使用道具 举报

发表于 2009-6-4 23:23:54 | 显示全部楼层
改了下,始终居底,不知道这结构稳定性怎么样

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-6-4 23:24:38 | 显示全部楼层

回复 11# ONEBOYS 的帖子

不知道垂直居中是怎么模拟的
回复 支持 反对

使用道具 举报

发表于 2009-6-5 08:05:47 | 显示全部楼层
没看清楚,还以为是解决背景图片的呢
回复 支持 反对

使用道具 举报

发表于 2009-6-5 09:20:12 | 显示全部楼层

回复 5# minepace 的帖子

其实这个问题可以用获取documentElement的高宽来解决!我之前也遇到这个问题,后来发现body上面document下面还有一个documentElement的东东!
回复 支持 反对

使用道具 举报

发表于 2009-6-5 10:43:43 | 显示全部楼层
这个demo我很早就见过,但不知道谁的原创。是一个典型的CSS灵活使用的例子。和未知宽度的块级元素居中一样。能让人眼前一亮,豁然开朗的感觉。
回复 支持 反对

使用道具 举报

发表于 2009-6-5 11:21:19 | 显示全部楼层

同意4楼

项目里这么用过,遇到不少问题。很多函数都没办法正常工作了。
回复 支持 反对

使用道具 举报

发表于 2009-6-5 14:19:43 | 显示全部楼层
项目中很多一些关键插件都有取到BODY的高的。这么一限制下IE下那些插件都出问题的

[[i] 本帖最后由 amwaneeq814 于 2009-6-5 14:20 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-5 15:13:14 | 显示全部楼层

回复 11# ONEBOYS 的帖子

直接fixed和这种方法,html的位置不一样啊(一个在wrapper里面,怎么共存呢?
遮住滚动条的解决办法我是直接给了个18px的空距。不过这样一来,某些浏览器(如sf3)或者windows滚动条宽度被设置状态下、windows经典外观的状态下,会出漏子。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-5 15:15:45 | 显示全部楼层

回复 20# amwaneeq814 & 19# yf1983321 的帖子

是的。所以如果您需要用到别人的JS插件,该方法请慎用。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-5 15:21:27 | 显示全部楼层

回复 18# nick03 的帖子

一个CSS的实现方法尤其是这样一个原理很简单的方法,可能很多人想到,你到别处见到也很有可能。
回复 支持 反对

使用道具 举报

发表于 2009-6-5 17:57:16 | 显示全部楼层
其实也是用到了JS才解决。呵呵。

[[i] 本帖最后由 amwaneeq814 于 2009-6-5 18:17 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-6-6 13:24:24 | 显示全部楼层

回复 21# 14px [楼主] 的帖子

其实我们可以把设置的位置调整一下。

你这里试试在.body里设置position:relative/absolute。岂不是也“成了”fixed的效果了。
这样“正常”的absolute定位就不能表现了。

试试这个

 提示:您可以先修改部分代码再运行




其实最麻烦的还是覆盖滚动条的问题,一旦出现覆盖,就等于穿帮了。
所以我宁愿使用hack,只让ie6下模拟,其他用fixed。对ie6也算仁至义尽了。

 提示:您可以先修改部分代码再运行



http://www.cssass.com/blog/index.php/2008/19.html
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-6 14:56:21 | 显示全部楼层
原来如此``~`哈哈,只给ie6用div来模拟滚动条。
谢谢 ONEBOYS 解惑 ^-^
回复 支持 反对

使用道具 举报

发表于 2009-6-6 14:58:36 | 显示全部楼层
覆盖滚动条问题 可以yong hack
滚动条固定宽度大概就17px~ 加上些padding ~

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-6-15 11:34:18 | 显示全部楼层
在做项目的过程中,经常碰到这样的问题,楼主的方法以前见过,但是我觉得26楼的方法会更好一些。。。
回复 支持 反对

使用道具 举报

发表于 2009-8-5 17:02:52 | 显示全部楼层

可以试试ie7.js

对于position:fixed我也是很久之前就喜欢了.
我认识到这点还是从ie7.js这个起的~
介绍:
IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

看完应该了解了大概吧.我理解的是将客户端浏览器标准化...
项目地址可以参见google code
http://code.google.com/p/ie7-js/

只是这个仍有问题存在.
当前页面窗口触发resize的时候.position:fixed的弱点就显现无移了.
我到现在都没找到解决的方法.
回复 支持 反对

使用道具 举报

发表于 2009-8-10 23:54:51 | 显示全部楼层
我在06年玩过的代码

  1. html,body { height:100%; }
  2. body {font-size:14px; line-height:2;}

  3. html {_overflow:hidden;}
  4. * html body {overflow:auto; font-size:14px; line-height:2;}

  5. .fixed {position:fixed;_position:absolute; top:10px; left:10px; width:200px; height:350px; background:#fc0; border:1px solid #f60;}
复制代码


因为浏览器滚动条默认是html的滚动,把他换成body的就行了,IE6元素绝对定位,如果支持fixed,还是向后兼容好一些,我觉得。

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-8-11 16:37:52 | 显示全部楼层
原帖由 [i]naruco 于 2009-8-5 17:02 发表
对于position:fixed我也是很久之前就喜欢了.
我认识到这点还是从ie7.js这个起的~
介绍:
IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes ...


调用document.recalc()可以重新计算,但是计算的性能代价比较大。
回复 支持 反对

使用道具 举报

发表于 2009-8-11 16:51:48 | 显示全部楼层
我也在IE6的标准模式下,用html overflow:hidden和body overflow:auto来模拟过fixed。

其实当时主要是为了解决IE6标准模式下scrollbar丢失焦点问题。因为IE下所有hasLayout的元素都可以获得焦点,所以导致点击任何hasLayout元素,焦点就跑到该元素上。如果一边填写表单一边scroll,焦点就会飞来飞去很麻烦。IE为此做了一个patch,就是body的scrollbar不会抢焦点。然而傻逼的微软在IE6标准模式下,窗口scrollbar实际上变成了html元素而不是body元素的scrollbar,而该patch却仍然只作用于body元素,而不是html元素。为了使用body元素上的被patch过的scrollbar,就只能把html元素的scrollbar隐藏掉,改用body上的。

这样一来,顺便就得到了fixed效果。当然这其实有很多副作用。一个是你在absolute和fixed效果中只能选择一个。再有,就是前面大家讨论的遮蔽scrollbar问题。然后取页面高度和宽度(scrollbar宽度不会被扣除掉)都发生问题了。这些当然最终是可以解决的。只是第三方库或者插件万一要自行取得这些高宽,就没辙了。

所以大多数时候,咱还是退而求其次,给IE用absolute意思意思得了。本来,如果不支持fixed,浏览器就应该按照absolute来解释滴,可怜IE脑残,偏要按照static解释。咱也都习惯了,手动加个 _position:absolute 吧。
回复 支持 反对

使用道具 举报

发表于 2009-8-11 17:17:04 | 显示全部楼层
原帖由 [i]Elking 于 2009-6-6 14:58 发表
覆盖滚动条问题 可以yong hack
滚动条固定宽度大概就17px~ 加上些padding ~
[html]




position:fixed


html,body{margin:0;padding:0;text-align:center;}

body{height:100%;overflow:auto;}
.f ...


ie7  试验过了吗?????我这不好用啊

ie7  试验过了吗?????我这不好用啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-7-22 11:51 , Processed in 0.093514 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表