您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > IE6之Fixed定位方法

IE6之Fixed定位方法

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：379 更新時(shí)間：2010-10-12 14:09 參與評(píng)論

眾所周產(chǎn)于公元2002年、且當(dāng)前為我國(guó)主流的IE6瀏覽器是不支持CSS2的靜止定位屬性fixed，蛋疼的前端工程師們?yōu)榇税l(fā)明了各種形式的解決方案：

一、常規(guī)js解決之道

這個(gè)最為古老，應(yīng)用廣泛，比如很多跟著滾動(dòng)條走的對(duì)聯(lián)廣告就是使用此方案。缺點(diǎn)就是拖動(dòng)滾動(dòng)條元素抖動(dòng)很厲害，雖然通過(guò)平滑處理可以改善下，效果仍然不理想。不過(guò)要說(shuō)的是此方案雖然視覺(jué)效果差了那么一點(diǎn)，穩(wěn)定性是沒(méi)得說(shuō)的。

二、動(dòng)用HTML結(jié)構(gòu)與布局模擬法

此方案曾經(jīng)被163博客應(yīng)用，163把所有的內(nèi)容放在一個(gè)高度100%且滾動(dòng)條設(shè)置為自動(dòng)的容器中，然后再下面設(shè)置一個(gè)絕對(duì)定位的層，這樣這個(gè)絕對(duì)定位的層就可以達(dá)到靜止?fàn)顟B(tài)。原理：你拖動(dòng)的滾動(dòng)條并不是拖動(dòng)的整個(gè)頁(yè)面，而是那個(gè)模擬整頁(yè)的容器，所以容器外的地方都是“靜止”的。詳細(xì)：

以下為引用的內(nèi)容：

<!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>