詳解IE6中的position：fixed問題與隨滾動條滾動的效果

來源：本站原創(chuàng)|時間：2020-01-11|欄目：CSS/HTML|點(diǎn)擊：次

詳解IE6中的position：fixed問題與隨滾動條滾動的效果

前言：

在《【jQuery】兼容IE6的滾動監(jiān)聽》（點(diǎn)擊打開鏈接）提及到解決IE6fixed問題，具體是要引入一個js文件，還要聲明一條腳本就為這個div聲明fixed定位去解決，起始這樣很不好啊。引入的Javascript不好管理之余，還要在head聲明引入javascript，之后又要給這個div聲明一個id，之后又要在腳本出弄一條聲明，實(shí)在是煩死了。

使用position：fixed無非是想做出如下的效果。

基本上position：fixed是在IE7以上的所有瀏覽器都是沒有問題的：

IE8：

野狐禪FireFox：

然而由于IE6中直接就沒有position：fixed屬性，要做出如下的效果：

只能利用position: absolute;加一段在css樣式中執(zhí)行的javascript腳本去解決。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Untitled Document</title> 
    <style type="text/css">     
      .fixedbox { 
        background: #69C; 
        height: 60px; 
        width: 100px;         
        position: fixed; 
        bottom: 100px; 
        /*IE6實(shí)現(xiàn)position: fixed;*/ 
        /*等價于position: fixed;雖然代碼好長，但是根本就不用管*/ 
        _position: absolute;         
        _top: expression(eval( 
        document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight- 
        (parseInt(this.currentStyle.marginTop,10)||0)- 
        (parseInt(this.currentStyle.marginBottom,10)||0))); 
        /*等價于position: fixed;雖然代碼好長，但是根本就不用管*/ 
        _margin-bottom:100px;/*設(shè)置位置，不要用bottom，而是改用margin-bottom，margin-xx來實(shí)現(xiàn)*/ 
      } 
    </style> 
  </head> 
  <body> 
    <div style="float:left;width:80%;min-height:100px;"> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p> 
      <p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p><p>sss</p>    
    </div> 
    <div style="float:left;width:20%;min-height:100px;"><div class="fixedbox"></div></div> 
    <div style="clear:both"></div>     
  </body> 
</html>

上述代碼，對于IE6的樣式，前面都加上了_，_的部分是IE6特定的重寫樣式聲明，具體見《【CSS】關(guān)于CSS樣式中的!important、*、_符號》（點(diǎn)擊打開鏈接）

而實(shí)際上，在IE6中，以下的CSS：

.fixed{ 
  position: absolute;        
  top: expression(eval( 
    document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight- 
    (parseInt(this.currentStyle.marginTop,10)||0)- 
    (parseInt(this.currentStyle.marginBottom,10)||0))); 
}

等價于其它瀏覽器的：

.fixed{ 
  position: fixed; 
}

當(dāng)然IE6中實(shí)現(xiàn)position：fixed的CSS可能在某些瀏覽器中不正常，因此在各個樣式前面補(bǔ)上一條下劃線_，表示僅在IE6中執(zhí)行。

同時IE6應(yīng)有的如上樣式之后，不要像其它瀏覽器用right,top,left,bottom去定位，而是用margin-bottom,margin-left,margin-right去設(shè)置被position：fixed的div的位置，

這里調(diào)節(jié)div的位置的時候還需要注意，由于上述的兼容IE6的CSS利用到top的屬性，所以設(shè)置margin-top是不管用，如果你要設(shè)置這個div在浮動的時候，離瀏覽器的頂部是多少的話，你應(yīng)該這樣寫：

.fixed{ 
  /*IE6實(shí)現(xiàn)position: fixed;*/ 
  _position: absolute;         
  _top: expression(eval(document.documentElement.scrollTop)); 
  _margin-top:100px; 
}

這里關(guān)于_top的代碼之所以短了這么多，是因?yàn)闊o須用document.documentElement.clientHeight來獲取瀏覽器顯示窗口大小。

而-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)一切是為了微調(diào)更加精確，如果你不想要也可以不加，僅僅是有一點(diǎn)視覺效果而已。

再者，上述的代碼，大家可以看到，關(guān)于fixedbox這個東西，我并沒有設(shè)置其right,left，是因?yàn)椋蚁胱屍湓陔S滾動條滾動的時候，依舊能夠保持父級div的float:left屬性。

就是，右邊的藍(lán)色色塊，與左邊一大堆sss，依舊是80%與20%的分割。

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

上一篇：學(xué)習(xí)小實(shí)例--滾動條的簡單實(shí)現(xiàn)

欄目：CSS/HTML

下一篇：HTML5視頻播放標(biāo)簽video和音頻播放標(biāo)簽audio標(biāo)簽的正確用法

本文標(biāo)題：詳解IE6中的position：fixed問題與隨滾動條滾動的效果

本文地址：http://www.jygsgssxh.com/a1/CSS_HTML/11487.html

更多CSS/HTML

雷火电竞-中国电竞赛事及体育赛事平台

CSS/HTML

詳解IE6中的position：fixed問題與隨滾動條滾動的效果

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀