当前位置: 主页 > 网上安家 > web开发 >

谈IE6之Fixed定位

时间:2010-10-20 15:05来源:Plane Art 作者:网络
在实现了ie6 fixed的前提下,实际应用中可能还需要对这个fixed元素调整位置,如鼠标拖拽元素。上面的DEMO同样是使用expression实现,不同的是expression直接应用到了要操作的对象上,这样就不会发生上述BUG了,直接设置在元素上后再想手动改变元素位置(如拖动)是相当
  

众所周产于公元2002年、且当前为我国主流的IE6浏览器是不支持CSS2的静止定位属性fixed,蛋疼的前端工程师们为此发明了各种形式的解决方案:

一、常规js解决之道

这个最为古老,应用广泛,比如很多跟着滚动条走的对联广告就是使用此方案。缺点就是拖动滚动条元素抖动很厉害,虽然通过平滑处理可以改善下,效果仍然不理想。不过要说的是此方案虽然视觉效果差了那么一点,稳定性是没得说的。

二、动用HTML结构与布局模拟法

此方案曾经被163博客应用,163把所有的内容放在一个高度100%且滚动条设置为自动的容器中,然后再下面设置一个绝对定位的层,这样这个绝对定位的层就可以达到静止状态。原理:你拖动的滚动条并不是拖动的整个页面,而是那个模拟整页的容器,所以容器外的地方都是“静止”的。详细:

以下为引用的内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{margin:0}
body{
 height:1000px;
 width:1000px;
 }
 #a{
 width:300px;
 height:100px;
 background:red;
 }
</style>
<script>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = function(){
    var a = document.getElementById('a');
    var d = document.getElementById('d');
   if(isie6){
         a.style.position = 'absolute';
        
         window.onscroll = function(){
              d.innerHTML = '';
          }
   }else{
      a.style.position = 'fixed';
   }
      a.style.right = '0';
      a.style.bottom = '0';
}
</script>
</head>
<body>
<div id ="d" style="display:none;"></div>
<div id='a'>test</div>
</body>
</html>
 


这里视觉效果达到完美,问题有三:

1、需要改变HTML结构(此项不解释)

2、破坏了用户体验:我曾经也试过此方法,但是我刷新页面的时候滚动条不会停留在原处,这点我不能容忍。

3、破坏js一些事件,如cloudgamer提到会破坏window的scroll事件,这里至少可以让N多封装好的js组件失效。

三、前无古人的“清空法”之火星方法解决

原理实在离奇,我解释不了,并且应用的局限性太大了。例子见:

以下为引用的内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{margin:0}
body{
 height:1000px;
 width:1000px;
 }
 #a{
 width:300px;
 height:100px;
 background:red;
 }
</style>
<script>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = function(){
    var a = document.getElementById('a');
    var d = document.getElementById('d');
   if(isie6){
         a.style.position = 'absolute';
        
         window.onscroll = function(){
              d.innerHTML = '';
          }
   }else{
      a.style.position = 'fixed';
   }
      a.style.right = '0';
      a.style.bottom = '0';
}
</script>
</head>
<body>
<div id ="d" style="display:none;"></div>
<div id='a'>test</div>
</body>
</html>
 


四、老技术新用的expression加fixed背景方案

此方案能够视觉上完美的实现静止定位。例子:

cloudgamer:AlertBox 弹出层(信息提示框)效果

我以前的:《简易的全屏透明遮罩(lightBox)解决方案》

这两种方案本来已经很完美了,我artDialog早期版本也是这么实现的,可是后来使用过程中发现了一个更加不能容忍的BUG,我在回复cloudgamer写了BUG触发DEMO:

以下为引用的内容:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
推荐内容