再谈IE6之Fixed定位
众所周产于公元2002年、且当前为我国主流的IE6浏览器是不支持CSS2的静止定位属性fixed，蛋疼的前端工程师们为此发明了各种形式的解决方案：
一、常规js解决之道
这个方案最为古老，比IE6还老，且应用十分广泛：比如很多跟着滚动条走的对联广告就是使用此方案。缺点就是拖动滚动条元素抖动很厉害，虽然通过平滑处理可以改善下，效果仍然不理想。不过要说的是此方案虽然视觉效果差了那么一点，稳定性与可控性没得二话说的。
二、动用HTML结构与布局模拟法
此方案曾经被163博客应用，163把所有的内容放在一个高度100%且滚动条设置为自动的容器中，然后再下面设置一个绝对定位的层，这样这个绝对定位的层就可以达到静止状态。原理：你拖动的滚动条并不是拖动的整个页面，而是那个模拟整页的容器，所以容器外的地方都是“静止”的。详细：
http://bbs.blueidea.com/thread-2930592-1-1.html
这里视觉效果达到完美，问题有三：
- 1、需要改变HTML结构（此项不解释）
- 2、破坏了用户体验：我曾经也试过此方法，但是我刷新页面的时候滚动条不会停留在原处，这点我不能容忍。
- 3、破坏js一些事件，如cloudgamer提到会破坏window的scroll事件，这里至少可以让N多封装好的js组件失效。
三、前无古人的“清空法”之火星方法解决
原理实在离奇，我解释不了，并且应用的局限性太大了。例子见：
http://bbs.blueidea.com/thread-2938030-1-1.html
四、老技术新用的expression加fixed背景方案
此方案能够视觉上完美的实现静止定位。例子：
- cloudgamer：AlertBox 弹出层（信息提示框）效果
- 我以前的：《简易的全屏透明遮罩(lightBox)解决方案》
这两种方案本来已经很完美了，我artDialog早期版本也是这么实现的，可是后来使用过程中发现了一个更加不能容忍的BUG，我在回复cloudgamer写了BUG触发DEMO：
http://bbs.blueidea.com/viewthread.php?tid=3001496&page=1#pid5047726
这个问题的本质就是用expression模拟fixed外包裹元素实际是设置了absolute，并且遮盖了页面，IE6可能导致其下页面一些元素无法响应事件，如div、td、span等，只有a、button、input等元素可以响应，那些无法响应事件的元素如果包含了文字BUG又会消失。这个美丽的效果下藏了这么一个大坑，让我们情何以堪……
是的，我原来很崇尚这个方案，因为视觉效果完美并且相对简单。但是它的BUG让我万念俱灰，甚至都想放弃对IE6 fixed支持，时不时的以“渐进增强”来说服自己，本身fixed更多的意义是一个视觉效果，重要性不能与absolute的相提并论……好吧，我要说的是有了解决上述BUG的方法，所以“渐进增强”的想法又被我抛到脑后去了（吃不到葡萄就说葡萄酸，吃到了葡萄就甜了..），下面的DEOM代码是我四天前写好的，直到今天才在自己Blog上分享，希望彻底埋了第上述第四方案的坑了：
五、使用js 设置 expression 与 removeExpression 法
01
|
<!DOCTYPE>
|
02
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
03
|
<head>
|
04
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
05
|
<title>ie6 Fixed</title>
|
06
|
</head>
|
07
|
|
08
|
<body>
|
09
|
<p><button id="fixedBtn">设置静止定位</button><button id="fixedBtn2">改变位置</button></P>
|
10
|
<P><button id="absoluteBtn">设置绝对定位</button><button id="absoluteBtn2">改变位置</button></P>
|
11
|
<div id="fixed" style="width: 60px; height:60px; background:#C0C0C0; border:solid 1px #000;"></div>
|
12
|
<div style="height:1400px;" title="请拖动滚动条"></div>
|
13
|
<script type="text/javascript">
|
14
|
var position = function(){
|
15
|
var isIE6 = !-[1,] && !window.XMLHttpRequest,
|
16
|
html = document.getElementsByTagName('html')[0],
|
17
|
dd = document.documentElement,
|
18
|
db = document.body,
|
19
|
dom = dd || db,
|
20
|
// 获取滚动条位置
|
21
|
getScroll = function(win){
|
22
|
return {
|
23
|
left: Math.max(dd.scrollLeft, db.scrollLeft),
|
24
|
top: Math.max(dd.scrollTop, db.scrollTop)
|
25
|
};
|
26
|
};
|
27
|
|
28
|
// 给IE6 fixed 提供一个"不抖动的环境"
|
29
|
// 只需要 html 与 body 标签其一使用背景静止定位即可让IE6下滚动条拖动元素也不会抖动
|
30
|
// 注意：IE6如果 body 已经设置了背景图像静止定位后还给 html 标签设置会让 body 设置的背景静止(fixed)失效
|
31
|
if (isIE6 && document.body.currentStyle.backgroundAttachment !== 'fixed') {
|
32
|
html.style.backgroundImage = 'url(about:blank)';
|
33
|
html.style.backgroundAttachment = 'fixed';
|
34
|
};
|
35
|
|
36
|
return {
|
37
|
fixed: isIE6 ? function(elem){
|
38
|
var style = elem.style,
|
39
|
doc = getScroll(),
|
40
|
dom = '(document.documentElement || document.body)',
|
41
|
left = parseInt(style.left) - doc.left,
|
42
|
top = parseInt(style.top) - doc.top;
|
43
|
this.absolute(elem);
|
44
|
style.setExpression('left', 'eval(' + dom + '.scrollLeft + ' + left + ') + "px"');
|
45
|
style.setExpression('top', 'eval(' + dom + '.scrollTop + ' + top + ') + "px"');
|
46
|
} : function(elem){
|
47
|
elem.style.position = 'fixed';
|
48
|
},
|
49
|
|
50
|
absolute: isIE6 ? function(elem){
|
51
|
var style = elem.style;
|
52
|
style.position = 'absolute';
|
53
|
style.removeExpression('left');
|
54
|
style.removeExpression('top');
|
55
|
} : function(elem){
|
56
|
elem.style.position = 'absolute';
|
57
|
}
|
58
|
};
|
59
|
}();
|
60
|
</script>
|
61
|
<script>
|
62
|
var elem = document.getElementById('fixed');
|
63
|
document.getElementById('fixedBtn').onclick = function(){
|
64
|
elem.style.left = '100px';
|
65
|
elem.style.top = '100px';
|
66
|
position.fixed(elem);
|
67
|
};
|
68
|
document.getElementById('fixedBtn2').onclick = function(){
|
69
|
elem.style.left = '400px';
|
70
|
elem.style.top = '100px';
|
71
|
position.fixed(elem);
|
72
|
};
|
73
|
document.getElementById('absoluteBtn').onclick = function(){
|
74
|
elem.style.left = '100px';
|
75
|
elem.style.top = '100px';
|
76
|
position.absolute(elem);
|
77
|
};
|
78
|
document.getElementById('absoluteBtn2').onclick = function(){
|
79
|
elem.style.left = '400px';
|
80
|
elem.style.top = '100px';
|
81
|
position.absolute(elem);
|
82
|
};
|
83
|
</script>
|
84
|
</body>
|
85
|
</html>
|
新窗口打开演示文档
在实现了ie6 fixed的前提下，实际应用中可能还需要对这个fixed元素调整位置，如鼠标拖拽元素。上面的DEMO同样是使用expression实现，不同的是expression直接应用到了要操作的对象上，这样就不会发生上述BUG了，直接设置在元素上后再想手动改变元素位置（如拖动）是相当困难的，必须有一个可以重置expression的方法，而前些天在msdn上看到的removeExpression方法，问题迎刃而解！你也可以看artDialog3在IE6 fixed的表现。
如果光说到标准的fixed定位除了left与top之外还有right与bottom属性，显然目前此方案支持它们会比较麻烦，还好就是这两个属性在javascript组件中很少用到，不是吗？当然我们如能在能力与精力的范围内满足需求是最好不过的了，如果有更好的方案欢迎提出！
planeart.cn原创文章，原文地址：http://www.planeart.cn/?p=877
再谈IE6之Fixed定位相关推荐
- ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法...
ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...
- 再谈多态——向上映射及VMT／DMT(转)
在<浅谈多态--概念描述>一文中,提到多态的本质就是"将子类类型的指针赋值给父类类型的指 针".那么,为什麽这种赋值是允许的,或者说是安全的呢?反过来行不行?虚函数的动 ...
- 再谈软件测试-工作感悟
软件测试,一个即将要崛起的行业,却也是一个充满着争议性的行业.谈到崛起,是因为我们发现,我们身边的客户开始越来越关注软件的体验性了,如果你的软件还有功能问题,他们可就不那么待见你了.同样,在国内的公司 ...
- CSS transform 使 fixed 定位失效？
CSS transform 使 fixed 定位失效? 1. 最终实现效果如下 看似简单的一个动画,却出现了种种bug,也不叫bug,毕竟是W3C官方的嘛,整整耗费了我一下午的时间去搞它. 2. 布局 ...
- CSS fixed 定位元素失效的问题
一个示例 考察下面的代码: <head><title>css filter issue</title><style> body { height: 20 ...
- 再谈BOM和DOM(1):BOM与DOM概述
JavaScript的实现包括以下3个部分: ECMAScript(核心):描述了JS的语法和基本对象. 浏览器对象模型(BOM):与浏览器交互的方法和接口 文档对象模型 (DOM):处理网页内容的方 ...
- 透过数字化转型再谈数据中台（三）：一文遍历大数据架构变迁史
编者按:<透过数字化转型再谈数据中台>系列连载 6-8 篇左右,作者结合自己在数据中台领域多年实践经验,总结了数据架构知识.BI 知识,以及分享给大家一些产业互联网实施经验.本文是系列文章 ...
- 再谈多态——向上映射及VMT／DMT
再谈多态--向上映射及VMT/DMT 作者:Nicrosoft(nicrosoft@sunistudio.com) 2001.10.9 个人主页:http://www.sunistudio.com/n ...
- 再谈P2P技术：网络拓扑结构、核心技术分析
随着P2P应用的蓬勃发展,作为P2P应用中核心问题的发现技术除了遵循技术本身的逻辑以外,也受到某些技术的发展趋势.需求趋势的深刻影响. P2P协议概述 P2P打破了传统的Client/Server ( ...
最新文章
- 使用OpenCV和Imutils构建图像的蒙太奇效果
- 北京驾照到期换证简记
- ASP.NET Core -中间件(Middleware)使用
- 【娱说】会玩游戏的人才能更快的在未来商业中“打怪升级”
- Python将文字转拼音
- 无监督学习和监督学习的区别
- of方法:给集合一次性添加多个元素
- extundelete反删除总结
- db2有主键时默认hash分区_不允许设置db2主键问题的解决
- 20. Cookie 和 Session
- c语言程序基本设计,C语言程序的设计基本6.ppt
- 在线正则表达式测试，正则替换工具
- shell脚本批量删除几天前的文件
- 伪代码之KMeans和DBSCAN
- 算法笔记：Dinic最大流和SPFA费用流
- Android Ptrace Inject
- RoR介绍：一个Java程序员的开发体验
- systemverilog之覆盖率
- element-ui 执行 npm run build:theme 报错 Replace Autoprefixer browsers option to Browserslist config....
- vaild-palindrome