ie6下實現position:fixed效果實例介紹

發(fā)布時間：2013-02-16 09:39:02 作者：佚名

由于IE6并不支持position:fixed，所以導致很多好的效果都無法實現，但是在IE6下并不是不能夠實現，下面就通過一段實例介紹一下如何實現此種效果；建議:盡可能的手寫代碼，可以有效的提高學習效率和深度,感興趣的朋友可以了解下，或許本文對你有所幫助

建議:盡可能的手寫代碼，可以有效的提高學習效率和深度。
由于IE6并不支持position:fixed，所以導致很多好的效果都無法實現，但是在IE6下并不是不能夠實現，下面就通過一段實例介紹一下如何實現此種效果。代碼實例如下:

復制代碼

代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body
{
margin:40px;
padding:0px;
border:1px solid blue;
}
.first
{
width:300px;
height:600px;
border:1px solid red;
margin:20px;
}
.first .fixed
{
width:100px;
height:100px;
background-color:black;
position:fixed;
_margin-top:20px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
left:20px;
top:20px;
}
</style>
</head>
<body>
<div class="first">
<div class="fixed"></div>
</div>
</body>
</html>

以上代碼可以兼容IE6和其他主流瀏覽器，實現此效果的核心代碼是:

復制代碼

代碼如下:

_top:expression(eval(document.documentElement.scrollTop));

注意:加上了上面這一行代碼之后，IE6下top功能失效了，所以要加一個_margin-top。
雖然上面的代碼實現了想要的功能，但是還是有點問題，那就是當拖動滾動條的時候會出現顫抖現象。代碼修改如下:

復制代碼

代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*html
{
background-image:url(about:blank);
background-attachment:fixed;
}
body
{
margin:40px;
padding:0px;
border:1px solid blue;
}
.first
{
width:300px;
height:600px;
border:1px solid red;
margin:20px;
}
.first .fixed
{
width:100px;
height:100px;
background-color:black;
position:fixed;
_margin-top:20px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
left:20px;
top:20px;
}
</style>
</head>
<body>
<div class="first">
<div class="fixed"></div>
</div>
</body>
</html>

以上代碼完美實現了我們想要的功能，在第一段實例基礎上添加如下代碼:

復制代碼

代碼如下:

*html
{
background-image:url(about:blank);
background-attachment:fixed;
}

Tag：Position fixed

淺談原生頁面兼容IE9問題的解決方案
這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起
2020-12-16
新版chrome瀏覽器設置允許跨域的實現
這篇文章主要介紹了新版chrome瀏覽器設置允許跨域的實現,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起
2020-11-30
css hack之\9和\0就可能對hack IE11\IE9\IE8無效
每次設計一張網頁或一個表單，都被各種瀏覽器的兼容問題傷透腦筋，尤其是IE家族。在做兼容性設計時，我們往往會使用各種瀏覽器能識別的獨特語法進行hack，從而達到各種瀏覽
2020-03-20
css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下
2020-03-20
解決CSS瀏覽器兼容性問題的4種方案
這篇文章主要介紹了解決CSS瀏覽器兼容性問題的4種方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
2020-02-28
常見的瀏覽器兼容性問題(小結)
這篇文章主要介紹了常見的瀏覽器兼容性問題(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學
2020-02-20
border-radius IE8兼容處理的方法
這篇文章主要介紹了border-radius IE8兼容處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
2020-02-12
淺談遇到的幾個瀏覽器兼容性問題
這篇文章主要介紹了淺談遇到的幾個瀏覽器兼容性問題，詳細的介紹了幾種我遇到的問題和解決方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-09-26
base64圖片在各種瀏覽器的兼容性處理
這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-14
對常見的css屬性進行瀏覽器兼容性總結(推薦)
這篇文章主要介紹了對常見的css屬性進行瀏覽器兼容性總結(推薦)的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-20