偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

學習筆記 如何解決IE6 position:fixed固定定位問題

開發(fā) 前端
本文和大家分享一下解決IE6 position:fixed固定定位問題的方法,就像你所遇到的問題一樣,IE6有太多的bug讓制作網(wǎng)頁的人頭疼,相信你對本文介紹一定會感興趣。

你知道解決IE6 position:fixed固定定位問題方法嗎,這里和大家簡單分享一下,希望本文的介紹能讓你有所收獲。

解決IE6 position:fixed固定定位問題

就像你所遇到的問題一樣,IE6有太多的bug讓制作網(wǎng)頁的人頭疼。這篇文章介紹的是介紹我的如何解決IE6不支持position:fixed;屬性的辦法。

◆關于position:fixed;屬性生成絕對定位的元素,相對于瀏覽器窗口進行定位。
元素的位置通過“left”,“top”,“right”以及“bottom”屬性進行規(guī)定。

position:fixed;可以讓網(wǎng)頁上的某個元素固定在一個絕對的位置,即使拉動滾動條位置也不發(fā)生變化。在LOO2K博客右下角的那個置頂?shù)男“粹o就是用了這個CSS屬性實現(xiàn)的

一般的position:fixed;實現(xiàn)方法以我的博客為例,在右下角<divid="top">...</div>這個HTML元素使用的CSS代碼如下:

  1. #top{  
  2. position:fixed;  
  3. bottom:0;  
  4. right:20px;  
  5. }  
  6.  

實現(xiàn)讓<divid="top">...</div>元素固定在瀏覽器的底部和距離右邊的20個像素。

◆在IE6中實現(xiàn)position:fixed;的辦法剛剛提過,在IE6中是不能直接使用position:fixed;。你需要一些CSSHack來解決它。當然,IE6的問題也不僅僅position:fixed;

相同的還是讓<divid="top">...</div>元素固定在瀏覽器的底部和距離右邊的20個像素,這次的代碼是:

  1. #top{  
  2. position:fixed;  
  3. _position:absolute;  
  4. bottom:0;  
  5. right:20px;  
  6. _bottom:auto;  
  7. _top:expression(eval(document.documentElement.scrollTop+document.  
  8.  
  9. documentElement.clientHeight-this.offsetHeight-(parseInt(this.  
  10.  
  11. currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));  
  12. }  
  13.  

right跟left屬性可以用絕對定位的辦法解決,而top跟bottom就需要用上面的表達式來實現(xiàn)。其中在_position:absolute;中的_符號只有IE6才能識別,目的是為了區(qū)分其他瀏覽器。

上面的只是一個例子,下面的才是最重要的代碼片段:

◆使元素固定在瀏覽器的頂部:

  1. #top{  
  2. _position:absolute;  
  3. _bottom:auto;  
  4. _top:expression(eval(document.documentElement.scrollTop));  
  5. }  
  6.  

◆使元素固定在瀏覽器的底部:

  1. #top{  
  2. _position:absolute;  
  3. _bottom:auto;  
  4. _top:expression(eval(document.documentElement.scrollTop+document.  
  5.  
  6. documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)  
  7.  
  8. ||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));  
  9. }  
  10.  

◆這兩段代碼只能實現(xiàn)在最底部跟最頂部,你可以使用_margin-top:10px;或者_margin-bottom:10px;修改其中的數(shù)值控制元素的位置。

position:fixed;閃動問題現(xiàn)在,問題還沒有完全解決。在用了上面的辦法后,你會發(fā)現(xiàn):被固定定位的元素在滾動滾動條的時候會閃動。解決閃動問題的辦法是在CSS文件中加入:

  1. *html{  
  2. background-image:url(about:blank);  
  3. background-attachment:fixed;  
  4. }  
  5.  

其中*是給IE6識別的。

到此,IE6的position:fixed;問題已經(jīng)被解決了。現(xiàn)在LOO2K這個博客上的固定定位就是使用的這個辦法解決IE6固定定位問題的。

【編輯推薦】

  1. 深入探究margin在FF IE6 IE7中的兼容問題
  2. 探究IE8與IE7具體功能中窗口功能按鈕的變化
  3. IE6 IE7 IE8三個版本的CSS兼容速查手冊
  4. IE6下使用CSS定義DIV高度行之有效的辦法
  5. 技術(shù)前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題

 

責任編輯:佚名 來源: loo2k.com
相關推薦

2010-09-15 14:22:05

IE6position

2010-09-15 14:14:29

IE6position

2010-09-15 14:56:18

CSSposition:fi

2010-08-19 10:40:36

position:fiIE6

2010-09-15 15:03:52

CSS positio

2010-08-19 09:37:35

IE6fixed

2010-08-25 11:23:31

IE6margin

2010-10-08 16:31:08

AjaxIE6

2010-08-18 09:24:09

IE6兼容性

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-19 09:29:26

hoverIE6

2009-08-14 09:20:40

抵制IE6

2010-09-15 08:41:25

IE6IE7Firefox兼容

2010-08-27 13:31:58

IE6IE7Firefox

2010-08-19 14:19:12

IE6IE7IE8

2010-08-20 13:15:54

IE6IE7IE8

2010-08-19 16:06:15

2010-08-19 15:04:26

IE6DIV

2010-10-08 13:55:22

JavaScriptIE6

2010-08-18 09:14:58

IE6兼容性
點贊
收藏

51CTO技術(shù)棧公眾號