首頁 > 開發者 > JavaScript
CSS實現的相容所有瀏覽器的div懸浮在網頁一側的代碼，cssdiv
CSS實現的相容所有瀏覽器的div懸浮在網頁一側的代碼:
固定懸浮在網頁一側的效果應用非常的頻繁，尤其是客服系統或者公告系統，CSS提供了position:fixed屬性即可實現此功能，但是IE6瀏覽器並不支援，雖然IE6的使用者越來越少，但是畢竟還是有使用者在使用，所以最好還是要實現相容效果，下面就是一段能夠相容所有瀏覽器的代碼執行個體，希望能夠給需要的朋友帶來協助。
代碼如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css">* { padding:0; margin:0;}#fixedLayer { width:100px; line-height:50px; background:#FC6; border:1px solid #F90; position:fixed; right:10px; bottom:10px;}#content{ width:100px; height:1000px; margin:0px auto; background:red;}</style><!--[if lte IE 6]> <style type="text/css"> html { height:100%; overflow:hidden; } body { height:100%; overflow:auto; } #fixedLayer { position:absolute; } </style> <![endif]--></head><body><div id="content"></div><div id="fixedLayer">螞蟻部落</div></body></html>
以上代碼實現了我們的要求，能夠使div塊懸浮在網頁一側，併兼容所有瀏覽器。
相關閱讀:
1.position屬性可以參閱CSS的position屬性一章節。
2.<!--[if lte IE 6]>可以參閱CSS語句中<!--[if lte IE 6]><![endif]-->的作用一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11581
更多內容可以參閱:http://www.softwhy.com/divcss/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
