CSS實現的相容所有瀏覽器的div懸浮在網頁一側的代碼:固定懸浮在網頁一側的效果應用非常的頻繁,尤其是客服系統或者公告系統,CSS提供了position:fixed屬性即可實現此功能,但是IE6瀏覽器並不支持,雖然IE6的用戶越來越少,但是畢竟還是有用戶在使用,所以最好還是要實現相容效果,下麵就是一...
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/