跨瀏覽器的CSS固定定位
跨瀏覽器的CSS固定定位{position:fixed} css
不知道您是否留意了，瀏覽本站時，瀏覽器右下角有一個標着top的黑色直角三角形，能夠點擊它返回到正在瀏覽的網頁頁眉。當滾動網頁時，它的位置一直沒有任何改變，您感受它怎麼樣？這就是經過CSS的定位屬性{position:fixed}來實現的，經過它可讓HTML元素脫離文檔流固定在瀏覽器的某個位置。 html
IE七、Firefox、Opera，都支持CSS的{position:fixed}，因此很容易實現（《詳解定位與定位應用》） web
IE6不支持該屬性，可是在使用!DOCTYPE 聲明指定standards-compliant（標準）模式能夠經過CSS hack實現 express
上述聲明下IE5和IE5.5目前沒有發現經過純粹CSS可以解決的方案，可是能夠經過IE特有的expression在CSS中實現（移動網頁時固定元素會動），這和常見浮動Logo廣告利用Javascript實現原理是同樣的，只不過能夠直接寫在CSS中比較簡便的 瀏覽器
利用IE獨有的條件註釋語句能夠針對不一樣的IE版本精確設置，同時避免了這些代碼被其餘瀏覽器讀到，我的認爲比純粹的CSS Hack好，若是你安裝了多個IE（包括綠色版本），條件註釋將會以最高版本的IE爲標準。 app
實現代碼以下： post
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ui
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> spa
<html xmlns="http://www.w3.org/1999/xhtml"> 設計
<head>
......
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;......} 針對IE七、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如下都處於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>
代碼演示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處於Quirks模式，之前在standards-compliant模式下的設計又變形了，呵呵，這就是我們搞IE的下場。
- 1. JS+CSS固定層位置（隨瀏覽器大小絕對固定）
- 2. CSS 固定定位 position fixed
- 3. 解決IE6瀏覽器下position:fixed 固定定位問題 底部
- 4. 解決 固定定位 在 ie瀏覽器下 被遮擋
- 5. HTML5瀏覽器定位navigator.geolocation.getCurrentPosition
- 6. PC端瀏覽器定位
- 7. CSS層定位（相對定位，絕對定位，固定定位）
- 8. CSS層定位——固定定位，相對定位，絕對定位
- 9. CSS定位—— position絕對定位、相對定位、固定定位
- 10. 詳解CSS相對定位，絕對定位與固定定位
- 更多相關文章...
- • XSLT 瀏覽器 - XSLT 教程
- • Opera 瀏覽器 - 瀏覽器信息
- • RxJava操作符（十）自定義操作符
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。