跨瀏覽器的CSS固定定位

2020-03-24 17:18:38

字體：大中小

來源：轉載

供稿：網友

IE7、Firefox、Opera，都支持CSS的{position:fixed}，所以很容易實現（《詳解定位與定位應用》）
IE6不支持該屬性，但是在使用!DOCTYPE 聲明指定standards-compliant（標準）模式可以通過CSS hack實現
上述聲明下IE5和IE5.5目前沒有發現通過純粹CSS能夠解決的方案，但是可以通過IE特有的expression在CSS中實現（移動網頁時固定元素會動），這和常見浮動Logo廣告利用Javascript實現原理是一樣的，只不過可以直接寫在CSS中比較簡便的
利用IE獨有的條件注釋語句可以針對不同的IE版本精確設置，同時避免了這些代碼被其他瀏覽器讀到，個人認為比純粹的CSS Hack好，如果你安裝了多個IE（包括綠色版本），條件注釋將會以最高版本的IE為標準。
實現代碼如下：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
……
style type="text/css"
#fixed{position:fixed;top:5em;right:0;……} /*針對IE7、Opera、Firefox一行搞定*/
/style
/*IE6中利用容器對溢出內容的處理方式來實現的*/
!–[if IE 6]
style type="text/css"
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
/*fixed元素的絕對位置是相對于HTML元素來說，滾動條是body元素的，這是設置right:17px的原因*/
/style
![endif]–
!–[if lt IE 6]
style type="text/css"
#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
/style
![endif]–
/head
body
div id="wrapper"
……
/div
div id="fixed" h2 {position:fixed} /h2 /div
/body
/html代碼演示1（單個IE，純粹通過條件注釋區分IE瀏覽器）代碼演示2（多個IE，通過條件注釋+CSS hack區分IE瀏覽器，明顯的比純粹條件注釋復雜且不易讀，放上來主要是便于同個PC擁有多個IE瀏覽器朋友[一般應該做是web開發的]可以直接看到效果，下同。）或許有人像我一樣，在!DOCTYPE 聲明是XHTML1.0 Strict或者是XHTML1.1時，喜歡在聲明前面加上XML Prolog(如： ?xml version="1.0" encoding="utf-8"? )，但此時IE7以下都處于quriks（兼容）模式，所以上述針對IE6的Hack失效，這個時候你可以對IE6也通過expression來實現。當IE6處于quriks模式時，IE6和IE5.5對CSS解析方式幾乎雷同，所以當看到《position:fixed for Internet Explorer》時，我找到了在quriks模式下IE6/IE5.5/IE5統一的CSS解決方案： ?xml version="1.0" encoding="utf-8"?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"
head
……
!–[if lt IE 7]
style type="text/css"
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
/style
![endif]–
/head
body
div id="wrapper"
……
/div
div id="fixed" h2 {position:fixed} /h2 /div
/body
/html 代碼演示3（單個IE，純粹通過條件注釋區分IE瀏覽器）代碼演示4（多個IE，通過條件注釋+CSS hack區分IE瀏覽器）對比兩個純粹的CSS hack發現，兩個原理似乎相同，在于html元素和body元素的應用和對CSS的{position:fixed}的支持程度上，但是這實際上是一種Hack，基本上不具備通用性，知道這個方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管給它設置什么樣的高度和寬度，它的大小都始終充滿整個瀏覽器的可視區域，而IE5 以及 Quirks 模式下html元素和body元素所有寬高設置都會被忽略而保持充滿瀏覽器的可視區域，更多內容請看《IE 中的 html 元素》或許有人會想，現在可以引入了XML Prolog又能用純CSS方法解決了IE7以下的問題，這下爽了，但是加上XML Prolog后突然發現IE6處于Quriks模式，以前在standards-compliant模式下的設計又變形了，呵呵，這就是咱們搞IE的下場
本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS使用詳解

下一篇：CSS常用代碼