1. 程式人生 > >解決IE6瀏覽器下position:fixed固定定位問題

解決IE6瀏覽器下position:fixed固定定位問題

像你所遇到的問題一樣, IE6瀏覽器有太多的bug讓製作網頁的人頭疼。這篇文章介紹的是介紹的是如何解決IE6不支援position:fixed;屬性的辦法。如果我們需要做某個元素始終位於瀏覽器的底部,不會因為瀏覽器視窗的縮放和滾動條的滾動而變化,那個肯定是想到的用position:fixed生成絕對定位,只要設定這個CSS屬性就能達到剛剛的需求。當其他瀏覽器都正常顯示的時候,只有IE6不那麼完美。該元素的位置是通過"left", "top", "right" 以及 "bottom" 屬性進行規定。

一般的 position:fixed; 實現方法

在右下角 <div id="top">...</div>

這個 HTML 元素使用的 CSS 程式碼如下:#top{
position:fixed;
bottom:0;
right:20px;
}
實現讓 <div id="top">...</div> 元素固定在瀏覽器的底部和距離右邊的20個畫素。

在 IE6 中實現 position:fixed; 的辦法

IE6中是不能直接使用 position:fixed; 。你需要一些 CSS Hack 來解決它。當然,IE6 的問題也不僅僅 position:fixed;

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

#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 才能識別,目的是為了區分其他瀏覽器

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

使元素固定在瀏覽器的頂部#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; 閃動問題

現在,問題還沒有完全解決。在用了上面的辦法後,你會發現:被固定定位的元素在滾動滾動條的時候會閃動。解決閃動問題的辦法是在 CSS 檔案中加入:*html{
background-image:url(about:blank);
background-attachment:fixed;
}
其中 * 是給 IE6 識別的。

到此,IE6 的 position:fixed; 問題已經被解決了。這裡還為大家蒐集了一個採用JS解決的辦法。

相關推薦

解決IE6瀏覽器position:fixed固定定位問題

像你所遇到的問題一樣, IE6瀏覽器有太多的bug讓製作網頁的人頭疼。這篇文章介紹的是介紹的是如何解決IE6不支援position:fixed;屬性的辦法。如果我們需要做某個元素始終位於瀏覽器的底部,不會因為瀏覽器視窗的縮放和滾動條的滾動而變化,那個肯定是想到的用posit

IE6position:fixed不支持問題及其解決方式

div 網頁 this margin otto ima hack 一段 奇葩 IE6有諸多奇葩,不支持position:fixed就是當中之中的一個。所以在做一些比方固定在頂部或者底部或者固定元素的效果時須要考慮兼容IE6的這個問題。解決方式是用Ie6的hack。

IE6position:fixed不支援問題及其解決方案

IE6有諸多奇葩,不支援position:fixed就是其中之一。所以在做一些比如固定在頂部或者底部或者固定元素的效果時需要考慮相容IE6的這個問題。解決方案是用Ie6的hack。 *html {/* 只有IE6支援 */ background-image: url

positionfixed固定定位的用法

一、position:fixed;固定定位   1.實現某個元素在可視視窗的居中位置顯示     1)給自身設定寬高;     2)給自身加position:fixed;     3)用margin向左移動自身寬度的一半,向上移動自身高度的一半;   或:     1)給自身設定寬高;     

iosposition:fixed失效的問題解決

作者:旺仔如題的問題其實大家在開發過程中應該都有遇到過,網上搜的答案層出不窮,特別是用js解決的各路大神們,你用js解決你考慮過js的感受嗎?這個耗能是用css3解決成千上萬倍,好了話不多說,直接進入主題:如圖,考慮到使用者體驗的問題,一般頁面的下方提交按鈕都會隨著固定在頁面

ios 固定定位 input獲取焦點,ios 滾動條滾動 fixed固定定位失效,位置偏移

http://efe.baidu.com/blog/mobile-fixed-layout/還發現一個問題就是ios input設定readonly  還是能看到游標,然後解決方法是在行內寫了onfoc

做CSS固定視窗發現IE6不相容,下面是解決position:fixedIE6不相容的方法

.fixed-top /* 頭部固定 */{position:fixed;bottom:auto;top:0px;} .fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;} .fixed-left /* 左側固定

瀏覽器的CSS固定定位{position:fixed}

不知道您是否留意了,瀏覽本站時,瀏覽器右下角有一個標著top的黑色直角三角形,可以點選它返回到正在瀏覽的網頁頁首。當滾動網頁時,它的位置一直沒有任何改變,您感覺它怎麼樣?這就是通過CSS的定位屬性{position:fixed}來實現的,通過它可以讓HTML元素脫離文件流固定在瀏覽器的某個位置。 IE7

固定定位拉框點選自動回到頁面問題解決

點選下拉框時頁面自動回到頂部。     <dl id="sample" class="dropdown nav-text-select">             

移動端 position:fixed; 定位在iOS系統上失效,該怎麼解決

今天公司運營人員在蘋果手機上瀏覽頁面時發現一個bug,就是根據瀏覽器視窗position:fixed; 定位在底部的元素,會隨著螢幕的滾動而滾動,在iOS系統上失效,隨後讓我改。自己在網上搜了一些解決

IE6/7絕對定位position:absolute)元素消失

在IE6、7中如果一個浮動元素與絕對定位元素相鄰的話,在某些情況下絕對定位元素將會消失。在網上找了一下,有如下解釋: 1.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,以及沒有清除浮動時,IE6/7,FF中顯示一致; 測試程式碼1如下: <!DOCTYPE html PUBLIC "-//W3C//

HTML中定位屬性之固定定位position:fixed;

定位屬性:static :預設文字流 margin padding 從左到右 從上到下fixed:固定定位(脫離原來的文字)position: fixed; 盒子的左邊到瀏覽器可視視窗左邊之間的距離 left:20px; 盒子的右邊到瀏覽器可視視窗右邊之間的距離

中間部分滾動記錄div內滾動條的位置, 以及將頁面分為三部分組成解決position:fixed在ios失效問題

https://www.cnblogs.com/edisoner/p/6006804.html 將上一個頁面的div的scrolltop距離長度記錄在cookie中,然後通過js調整重新整理頁面時的長度記錄 <div id="x" style="height: 20

解決position:fixed 定位抖動的問題

再用position:fixed 在移動端進行底部導航定位時,出現了滑動抖動的問題, 用 第一種,給fixed的元素新增css的樣式,我試過,這個可以解決此閃動的問題。1-webkit-transform: translateZ(0);(可用) 第二種,設定css。我是

CSS position:fixed定位時 “高度坍塌” 問題的解決

這問題兩種方法: 1.給第二個模組div設定margin-top的值,margin-top的值設為大於等於固定定位模組的高度 2.這個方法是百度百科手機頁面用的,先為固定定位元素設一個父元素,不設高度,不設寬度,什麼都不設,他的第 一個子元素是我們需要做固定定位的元素,這

解決iframe跨域,iphone上position:fixed失效問題

最近接觸了一個活動頁面,先說需求需求:iframe下引用另一個專案的頁面(這裡諮詢了某大神,建議手機端不要再使用iframe了,已經被遺棄了),這裡出現問題1:跨域然後就是引用的長度肯定會大於你的手機高度,需要滾動。然鵝滾動時在頁面的某個位置需要點選一個彈窗。覆蓋整個螢幕,然

div通過position:fixed或者absolute固定位置後,或者onclick失效問題解決

     把這個絕對定位的div後面需要點選的link也放到絕對定位的div裡面,然後將這個div的z-index設定得大於前一個絕對定位的div即可: z-index: 9;position: ab

chromepositon:fixed無效或抖動的解決辦法

所在 scroll 版本 無效 frame pan var log style 先來看一下我們要實現的效果 我想這種效果大家都有實現過,或者說吸頂的效果和這差不多 頁面結構 js代碼如下 /*吸頂*/ var $child = $("#

chrome瀏覽器JavaScript實現clipboard時無法訪問剪切板解決方案

簡單 訪問 什麽 原因 .get 失敗 利用 ext 友好 在用JavaScript實現某個簡單的復制到剪切板功能的時候,會考慮一下瀏覽器兼容性,主要是重點在IE和FireFox,把這個兩個瀏覽器搞定後,基本上其他瀏覽器也不用太操心了,Chrome也一樣,沒出什麽

解決html5新標簽 placeholder 低版本瀏覽器不兼容問題

解決 html5 新標簽 placeholder屬性是HTML5 中為input添加的。在input上提供一個占位符,文字形式展示輸入字段預期值的提示信息(hint),該字段會在輸入為空時顯示。實例:1 <input type="text" name="userName" placehold