跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了，瀏覽本站時，瀏覽器右下角有一個標著top的黑色直角三角形，可以點擊它返回到正在瀏覽的網頁頁眉。當滾動網頁時，它的位置一直沒有任何改變，您感覺它怎么樣？這就是通過CSS的定位屬性{position:fixed}來實現的，通過它可以讓HTML元素脫離文檔流固定在瀏覽器的某個位置。
實現代碼如下：
<!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，純粹通過條件注釋區(qū)分IE瀏覽器）
代碼演示2（多個IE，通過條件注釋+CSS hack區(qū)分IE瀏覽器，明顯的比純粹條件注釋復雜且不易讀，放上來主要是便于同個PC擁有多個IE瀏覽器朋友[一般應該做是web開發(fā)的]可以直接看到效果，下同。）
或許有人像我一樣，在!DOCTYPE 聲明是XHTML1.0 Strict或者是XHTML1.1時，喜歡在聲明前面加上XML Prolog(如：<?xml version="1.0" encoding="utf-8"?>)，但此時IE7以下都處于Quirks（兼容）模式，所以上述針對IE6的Hack失效，這個時候你可以對IE6也通過expression來實現。
當IE6處于quriks模式時，IE6和IE5.5對CSS解析方式幾乎雷同，所以當看到《position:fixed for Internet Explorer》時，我找到了在Quirks模式下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>?
（單個IE，純粹通過條件注釋區(qū)分IE瀏覽器）
代碼演示4（多個IE，通過條件注釋+CSS hack區(qū)分IE瀏覽器）
對比兩個純粹的CSS hack發(fā)現，兩個原理似乎相同，在于html元素和body元素的應用和對CSS的{position:fixed}的支持程度上，但是這實際上是一種Hack，基本上不具備通用性，知道這個方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管給它設置什么樣的高度和寬度，它的大小都始終充滿整個瀏覽器的可視區(qū)域，而IE5 以及 Quirks 模式下html元素和body元素所有寬高設置都會被忽略而保持充滿瀏覽器的可視區(qū)域，更多內容請看《IE 中的 html 元素》
或許有人會想，現在可以引入了XML Prolog又能用純CSS方法解決了IE7以下的問題，這下爽了，但是加上XML Prolog后突然發(fā)現IE6處于Quirks模式，以前在standards-compliant模式下的設計又變形了，呵呵，這就是咱們搞IE的下場。
?
原文地址：http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/
轉載于:https://www.cnblogs.com/poissonnotes/archive/2010/05/23/1742078.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的跨浏览器的CSS固定定位{position:fixed}的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 权限管理的设计方法
- 下一篇： QQ牧场在高速模式下的一些小bug