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

創(chuàng)新互聯公司專注于鎮(zhèn)康網站建設服務及定制,我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供鎮(zhèn)康營銷型網站建設,鎮(zhèn)康網站制作、鎮(zhèn)康網頁設計、鎮(zhèn)康網站官網定制、小程序設計服務,打造鎮(zhèn)康網絡公司原創(chuàng)品牌,更為您提供鎮(zhèn)康網站排名全網營銷落地服務。
解決IE6 position:fixed固定定位問題
就像你所遇到的問題一樣,IE6有太多的bug讓制作網頁的人頭疼。這篇文章介紹的是介紹我的如何解決IE6不支持position:fixed;屬性的辦法。
◆關于position:fixed;屬性生成絕對定位的元素,相對于瀏覽器窗口進行定位。
元素的位置通過“l(fā)eft”,“top”,“right”以及“bottom”屬性進行規(guī)定。
position:fixed;可以讓網頁上的某個元素固定在一個絕對的位置,即使拉動滾動條位置也不發(fā)生變化。在LOO2K博客右下角的那個置頂的小按鈕就是用了這個CSS屬性實現的
一般的position:fixed;實現方法以我的博客為例,在右下角
- #top{
- position:fixed;
- bottom:0;
- right:20px;
- }
實現讓
◆在IE6中實現position:fixed;的辦法剛剛提過,在IE6中是不能直接使用position:fixed;。你需要一些CSSHack來解決它。當然,IE6的問題也不僅僅position:fixed;
相同的還是讓
- #top{
- position:fixed;
- _position:absolute;
- bottom:0;
- right:20px;
- _bottom:auto;
- _top:expression(eval(document.documentElement.scrollTop+document.
- documentElement.clientHeight-this.offsetHeight-(parseInt(this.
- currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
- }
right跟left屬性可以用絕對定位的辦法解決,而top跟bottom就需要用上面的表達式來實現。其中在_position:absolute;中的_符號只有IE6才能識別,目的是為了區(qū)分其他瀏覽器。
上面的只是一個例子,下面的才是最重要的代碼片段:
◆使元素固定在瀏覽器的頂部:
- #top{
- _position:absolute;
- _bottom:auto;
- _top:expression(eval(document.documentElement.scrollTop));
- }
◆使元素固定在瀏覽器的底部:
- #top{
- _position:absolute;
- _bottom:auto;
- _top:expression(eval(document.documentElement.scrollTop+document.
- documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)
- ||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
- }
◆這兩段代碼只能實現在最底部跟最頂部,你可以使用_margin-top:10px;或者_margin-bottom:10px;修改其中的數值控制元素的位置。
position:fixed;閃動問題現在,問題還沒有完全解決。在用了上面的辦法后,你會發(fā)現:被固定定位的元素在滾動滾動條的時候會閃動。解決閃動問題的辦法是在CSS文件中加入:
- *html{
- background-image:url(about:blank);
- background-attachment:fixed;
- }
其中*是給IE6識別的。
到此,IE6的position:fixed;問題已經被解決了。現在LOO2K這個博客上的固定定位就是使用的這個辦法解決IE6固定定位問題的。
新聞名稱:學習筆記如何解決IE6position:fixed固定定位問題
當前URL:http://m.5511xx.com/article/djpodoc.html


咨詢
建站咨詢
