網頁設計技巧:跨瀏覽器的CSS固定定位

來源:互聯網
上載者:User
css|技巧|瀏覽器|設計|網頁|網頁設計

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

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

  1. IE7、Firefox、Opera,都支援CSS的{position:fixed},所以很容易實現(《詳解定位與定位應用》
  2. IE6不支援該屬性,但是在使用!DOCTYPE 聲明指定standards-compliant(標準)模式可以通過CSS hack實現
  3. 上述聲明下IE5和IE5.5目前沒有發現通過純粹CSS能夠解決的方案,但是可以通過IE特有的expression在CSS中實現(移動網頁時固定元素會動),這和常見浮動Logo廣告利用Javascript實現原理是一樣的,只不過可以直接寫在CSS中比較簡便的
  4. 利用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的下場。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。