學(xué)習(xí)筆記 如何解決IE6 position:fixed固定定位問(wèn)題
你知道解決IE6 position:fixed固定定位問(wèn)題方法嗎，這里和大家簡(jiǎn)單分享一下，希望本文的介紹能讓你有所收獲。
解決IE6 position:fixed固定定位問(wèn)題
就像你所遇到的問(wèn)題一樣，IE6有太多的bug讓制作網(wǎng)頁(yè)的人頭疼。這篇文章介紹的是介紹我的如何解決IE6不支持position:fixed;屬性的辦法。
◆關(guān)于position:fixed;屬性生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。
元素的位置通過(guò)“left”,“top”,“right”以及“bottom”屬性進(jìn)行規(guī)定。
position:fixed;可以讓網(wǎng)頁(yè)上的某個(gè)元素固定在一個(gè)絕對(duì)的位置，即使拉動(dòng)滾動(dòng)條位置也不發(fā)生變化。在LOO2K博客右下角的那個(gè)置頂?shù)男“粹o就是用了這個(gè)CSS屬性實(shí)現(xiàn)的
一般的position:fixed;實(shí)現(xiàn)方法以我的博客為例，在右下角<divid="top">...</div>這個(gè)HTML元素使用的CSS代碼如下：
- #top{
- position:fixed;
- bottom:0;
- right:20px;
- }
實(shí)現(xiàn)讓<divid="top">...</div>元素固定在瀏覽器的底部和距離右邊的20個(gè)像素。
◆在IE6中實(shí)現(xiàn)position:fixed;的辦法剛剛提過(guò)，在IE6中是不能直接使用position:fixed;。你需要一些CSSHack來(lái)解決它。當(dāng)然，IE6的問(wèn)題也不僅僅position:fixed;
相同的還是讓<divid="top">...</div>元素固定在瀏覽器的底部和距離右邊的20個(gè)像素，這次的代碼是：
- #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屬性可以用絕對(duì)定位的辦法解決，而top跟bottom就需要用上面的表達(dá)式來(lái)實(shí)現(xiàn)。其中在_position:absolute;中的_符號(hào)只有IE6才能識(shí)別，目的是為了區(qū)分其他瀏覽器。
上面的只是一個(gè)例子，下面的才是最重要的代碼片段：
◆使元素固定在瀏覽器的頂部：
- #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)));
- }
◆這兩段代碼只能實(shí)現(xiàn)在最底部跟最頂部，你可以使用_margin-top:10px;或者_(dá)margin-bottom:10px;修改其中的數(shù)值控制元素的位置。
position:fixed;閃動(dòng)問(wèn)題現(xiàn)在，問(wèn)題還沒(méi)有完全解決。在用了上面的辦法后，你會(huì)發(fā)現(xiàn)：被固定定位的元素在滾動(dòng)滾動(dòng)條的時(shí)候會(huì)閃動(dòng)。解決閃動(dòng)問(wèn)題的辦法是在CSS文件中加入：
- *html{
- background-image:url(about:blank);
- background-attachment:fixed;
- }
其中*是給IE6識(shí)別的。
到此，IE6的position:fixed;問(wèn)題已經(jīng)被解決了?，F(xiàn)在LOO2K這個(gè)博客上的固定定位就是使用的這個(gè)辦法解決IE6固定定位問(wèn)題的。
【編輯推薦】
- 深入探究margin在FF IE6 IE7中的兼容問(wèn)題
- 探究IE8與IE7具體功能中窗口功能按鈕的變化
- IE6 IE7 IE8三個(gè)版本的CSS兼容速查手冊(cè)
- IE6下使用CSS定義DIV高度行之有效的辦法
- 技術(shù)前沿 一段JS代碼輕松解決IE6-IE8的兼容性問(wèn)題
