Heim > Web-Frontend > HTML-Tutorial > CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose

CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:30:53
Original
1132 Leute haben es durchsucht

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>
Nach dem Login kopieren

 

以上代码实现了我们的要求,能够使div块悬浮在网页一侧,并兼容所有浏览器。
相关阅读:
1.position属性可以参阅CSS的position属性一章节。
2.的作用一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11581

更多内容可以参阅:http://www.softwhy.com/divcss/

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage