码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-01-03 11:06:09      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

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/

 

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

标签:

原文地址:http://www.cnblogs.com/softwhy/p/5095839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!