廣東福建浙江江蘇上海北京山東遼寧江西河南四川湖北湖南廣西安徽黑龍江天津重慶吉林河北貴州甘肅山西云南新疆寧夏海南陜西西藏青海內(nèi)蒙古

新聞中心

CSS固定定位
發(fā)布時間:2014-10-11 23:27:32

不知道您是否留意了,瀏覽本站時,瀏覽器右下角有一個標(biāo)著top的黑色直角三角形,可以點擊它返回到正在瀏覽的網(wǎng)頁頁眉。當(dāng)滾動網(wǎng)頁時,它的位置一直沒有任何改變,您感覺它怎么樣?這就是通過CSS的定位屬性來實現(xiàn)的,通過它可以讓HTML元素脫離文檔流固定在瀏覽器的某個位置。

IE7、Firefox、Opera,都支持CSS的,所以很容易實現(xiàn)(《詳解定位與定位應(yīng)用》)
IE6不支持該屬性,但是在使用!DOCTYPE 聲明指定standards-compliant(標(biāo)準(zhǔn))模式可以通過CSS hack實現(xiàn)
上述聲明下IE5和IE5.5目前沒有發(fā)現(xiàn)通過純粹CSS能夠解決的方案,但是可以通過IE特有的expression在CSS中實現(xiàn)(移動網(wǎng)頁時固定元素會動),這和常見浮動Logo廣告利用Javascript實現(xiàn)原理是一樣的,只不過可以直接寫在CSS中比較簡便的
利用IE獨有的條件注釋語句可以針對不同的IE版本精確設(shè)置,同時避免了這些代碼被其他瀏覽器讀到,個人認(rèn)為比純粹的CSS Hack好,如果你安裝了多個IE(包括綠色版本),條件注釋將會以最高版本的IE為標(biāo)準(zhǔn)。
實現(xiàn)代碼如下:

"">


......

IE6中利用容器對溢出內(nèi)容的處理方式來實現(xiàn)的




......




代碼演示1(單個IE,純粹通過條件注釋區(qū)分IE瀏覽器)

代碼演示2(多個IE,通過條件注釋+CSS hack區(qū)分IE瀏覽器,明顯的比純粹條件注釋復(fù)雜且不易讀,放上來主要是便于同個PC擁有多個IE瀏覽器朋友[一般應(yīng)該做是web開發(fā)的]可以直接看到效果,下同。)

或許有人像我一樣,在!DOCTYPE 聲明是XHTML1.0 Strict或者是XHTML1.1時,喜歡在聲明前面加上XML Prolog(如:),但此時IE7以下都處于quriksQuirks(兼容)模式,所以上述針對IE6的Hack失效,這個時候你可以對IE6也通過expression來實現(xiàn)。

當(dāng)IE6處于quriks模式時,IE6和IE5.5對CSS解析方式幾乎雷同,所以當(dāng)看到《position:fixed for Internet Explorer》時,我找到了在quriksQuirks模式下IE6/IE5.5/IE5統(tǒng)一的CSS解決方案:


"">


......



......




代碼演示3(單個IE,純粹通過條件注釋區(qū)分IE瀏覽器)

代碼演示4(多個IE,通過條件注釋+CSS hack區(qū)分IE瀏覽器)

對比兩個純粹的CSS hack發(fā)現(xiàn),兩個原理似乎相同,在于html元素和body元素的應(yīng)用和對CSS的的支持程度上,但是這實際上是一種Hack,基本上不具備通用性,知道這個方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管給它設(shè)置什么樣的高度和寬度,它的大小都始終充滿整個瀏覽器的可視區(qū)域,而IE5 以及 Quirks 模式下html元素和body元素所有寬高設(shè)置都會被忽略而保持充滿瀏覽器的可視區(qū)域,更多內(nèi)容請看《IE 中的 html 元素》

或許有人會想,現(xiàn)在可以引入了XML Prolog又能用純CSS方法解決了IE7以下的問題,這下爽了,但是加上XML Prolog后突然發(fā)現(xiàn)IE6處于quriksQuirks模式,以前在standards-compliant模式下的設(shè)計又變形了,呵呵,這就是咱們搞IE的下場。


相關(guān)說明: 您可以通過電話:020-85421558 與我們聯(lián)系,我們會根據(jù)您所從事的行業(yè)領(lǐng)域和網(wǎng)站類型,在最短的時間內(nèi)請我們的營銷顧問與您預(yù)約后上門拜訪您,直接面談交流為您解答所有的網(wǎng)站建設(shè)疑問。
上一篇:全面了解CSS內(nèi)置顏色(color)值       下一篇:CSS欺騙,讓背景不能滾動

提供全國各地網(wǎng)站建設(shè)服務(wù)

上海北京深圳廣州天津南京大連杭州沈陽成都東莞濟(jì)南佛山無錫長沙武漢寧波長春蘇州青島珠海大慶福州廈門常州鄭州煙臺西安合肥南寧重慶東營昆明威海中山南昌紹興太原惠州溫州徐州揚(yáng)州淄博鎮(zhèn)江鞍山保定銀川南通洛陽嘉興臺州桂林貴陽蘭州盤錦漳州黃石唐山濰坊湘潭肇慶吉林江門?株洲泉州泰州包頭柳州德州韶關(guān)寶雞金華鹽城新鄉(xiāng)十堰廊坊玉溪濟(jì)寧滄州蕪湖湖州梧州泰安安陽遼陽舟山梅州常德三明連云港哈爾濱秦皇島馬鞍山石家莊呼和浩特

 
備案系統(tǒng)認(rèn)證 舉報不良網(wǎng)站 我們的支付方式 AAA級信用
廣州萬戶網(wǎng)絡(luò)信息科技有限公司 旗下網(wǎng)站建設(shè)品牌:萬戶網(wǎng) moderntrendboss.com 版權(quán)所有 ©2000-2019 All Rights Reserved
網(wǎng)站備案編號:粵ICP備15049595號 地址:廣州市番禺區(qū)大石街北聯(lián)圍仔工業(yè)路2號E座305
電話:020-85421558   傳真:020-88140140   郵編:510515