網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

【IE6 BUG大全】position:fixed在IE6下的實現

日期:2013-11-30  來源:攀枝花惠康網絡公司

Position屬性有四個可選值,它們分袂是:static、absolute、fixed、relative。我們下面來配合進修它們的分歧的用法,在進修中我們應該去思慮在什么結構情形下,應該使用它們其中的哪一種。

值 描述 static 默認。位置設置為 static 的元素,它始終會處于頁面流給以的位置(static 元素會忽略任何 top、bottom、left 或 right 聲明)。 relative 位置被設置為 relative 的元素,可將其移至相對于頗正常位置的處所,是以 “left:20″ 會將元素移至元素正常位置左邊 20 個像素的位置。 absolute 位置設置為 absolute 的元素,可定位于相對于包含它的元素的指定坐標。此元素的位置可經由過程 “left”、”top”、”right” 以及”bottom” 屬性來劃定。 fixed 位置被設置為 fixed 的元素,可定位于相對于瀏覽器窗口的指定坐標。此元素的位置可經由過程 “left”、”top”、”right” 以及”bottom” 屬性來劃定。非論窗口滾動與否,元素城市留在阿誰位置。工作于 IE7(strict 模式)。
<p>這是為了增添高度</p>


position:static 無定位
該屬性值是所有元素定位的默認情形,在一般情形下,我們不需要出格的去聲明它,但有時辰碰著擔任的情形,我們不愿定見到元素所擔任的屬性影響自己,年夜而可以用position:static打消擔任,即還原元素定位的默認值。
如:#nav{position:static;}

position:fixed 相對于窗口的固定定位


請出格注重,IE6及以下不撐持CSS中的position:fixed屬性。真的很是遺憾,所以我們只能經由過程JS模擬和CSS Hack等體例來實現。

1.IE前提注釋解決方案:

demo: http://www.css88.com/demo/position_fixed/POSITION_fixed2.html

XML/HTML代碼 <!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“>
<p>End</p>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
</head> <body>
<title>position:fixed――IE前提注釋解決方案</title>
<style type=”text/css”>
<!–
body {margin: 0; padding:0}
p{ height:50px}
.fixed {padding: 10px; background: #000; left: 0px; color: #fff; position: fixed; top:0; }


<p>這是為了增添高度</p>
</style>
<!–[if IE 6]>
<style type=”text/css”>*/
html{overflow:hidden;}
body{height:100%;overflow:auto;}
<p>這是為了增添高度</p>
.fixed{position:absolute;}
</style>
.fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
<!–[if lt IE 6]>
<style type=”text/css”>
</style>
<![endif]–>
<p>Begin</p>
<p>這是為了增添高度</p> <p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>

其他兩種前面提過,我們 首要說的是fixed


<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<![endif]–>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<div class=fixed>position: fixed;我始終在屏幕左上角哦</div>
<p>這是為了增添高度</p> <p>這是為了增添高度</p>
<!–以下是筒撿慟碼–> <script type=”text/javascript”>initAccessKey() //轉換AccessKey For IE</script><script type=”text/javascript”>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src=http://www.css88.com/archives/’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script type=”text/javascript”>
<p>這是為了增添高度</p>
var pageTracker = _gat._getTracker(“UA-3448069-1″);
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>

2.CSS hack解決方案:

demo: http://www.css88.com/demo/position_fixed/POSITION_fixed1.html

XML/HTML代碼 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<head>
&lon: fixed; top:0; _position: absolute} </style></head>

<body>
這個定位屬性值是什么意思呢?元素的定位體例同absolute近似,但它的包含塊是視區自己。在屏幕媒體如WEB瀏覽器中,元素在文檔滾動時不會在瀏覽器考察中移動。例如,它許可框架樣式結構。在頁式媒體如打印輸出中,一個固定元素會呈現于第一頁的不異位置。這一點可用于生成流動問題或腳注。我們也見過相似的效不美觀,但年夜都數效不美觀不是經由過程CSS來實現了,而是應用了JS劇本。


<p>Begin</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
</html>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
<p>這是為了增添高度</p>
–>
<p>End</p>
<div class=fixed>position: fixed;我始終在屏幕左上角哦</div>
</body>
<p>這是為了增添高度</p>

可能你要將這個板塊定位在右上角或者右下角,以上2種煩死都要將right:17px;為什么不是right:0呢?


<html xmlns=”http://www.w3.org/1999/xhtml“>
<p>這是為了增添高度</p>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

如不美觀您自己做過板塊定位在右上角、右下角或者右邊的某個位置這樣的實例就會發現這個問題,其實fixed元素的絕對位置是相對于HTML元素來說,而滾動條是body元素的,這是設置right:17px的原因就是要減去這個滾動條的寬度。

3.JS模擬解決方案:

demo: http://www.css88.com/demo/position_fixed/POSITION_fixed.html

這種體例斗勁繁瑣,不做推廣了,所以也就不做具體詮釋了。

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图