简单DIV+CSS浮动在线客服代码，支持IE6

我们经常遇到需要在两侧或一侧浮动的图片或按钮，特别是电商类网站需要在网页一侧浮动在线客服之类的按钮和图标。

大部分的浮动按钮之类的代码要么很复杂，要么简单但是不兼容IE6，毕竟IE6在中国的占有率还是比较高的，那么现在跟大家分享一个支持IE6简单的CSS代码。

这段CSS代码带浮动链接和回到顶部按钮：

CSS代码如下：（top.css）

#feedback{
right:100px;
width:70px;
height:100px;
line-height:15px;
overflow:visible;
padding:10px 5px;
border-radius:5px;
bottom:180px;
float:right;
position:fixed !important; top:200px;
}
*html #feedback {
position:absolute; z-index:300; top:expression(offsetParent.scrollTop+200);right:20px;
/*兼容IE6*/
}
#feedback a{
text-decoration:none;
color:#000;
}
#feedback_btn {
-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
border:1px solid #dfdfdf;
cursor:pointer;
padding:5px;
margin:5px;
background:#fff;
width:60px;
height:20px;
font-size:12px;
}
#returntop{
-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
border:1px solid #dfdfdf;
cursor:pointer;
padding:5px;
margin:5px;
background:#fff;
width:60px;
height:20px;
font-size:12px;
}

html代码如下：

<link rel="stylesheet" href="top.css" media="all" />
    
<div id="feedback">
<div id="feedback_btn"><a href="" target="_blank">客服</a></div>
    
<div id="feedback_btn"><a target="_blank" href="">QQ</a></div>
    
<div id="feedback_btn"><a target="_blank" href="">旺旺</a></div>
    
<div id="returntop">回顶部</div>
<script type="text/javascript">
var getDiv=document.getElementById('returntop');
getDiv.onclick=function(){
    window.scrollTo(0,0);
}
</script>
</div>
<table width="90%" border="0" align="center" bgcolor="#f8f8f8" height="1500"><td></td></table>

其中回到顶部使用了一个兼容IE6的JS代码，而没有使用#标签：

var getDiv=document.getElementById('returntop');
getDiv.onclick=function(){
    window.scrollTo(0,0);
}

本文链接：https://www.icoa.cn/a/619.html
关键词： css   js   浮动   代码  

---

如果您愿意支持，欢迎请扫码打赏哦~

---

上一篇：CSS样式兼容IE6,IE7的技巧

下一篇：CSS控制大图片自动缩放的样式，支持IE6

---

- 相关文章 -

---

3DS MAX 快捷键大全zt - 2011-03-10

3ds DxDDS.bmi未能初始化解决办法 - 2010-02-21

威客中国提供的设计软件绿色版下载 - 2011-10-22

PS CS3输入文字和移动图层等延迟和反应慢解决方法 - 2011-01-18

大8开尺寸、大度八开纸等的标准尺寸 - 2009-12-11

Google 提示 available in the new AdSense interface - 2011-06-29

Photoshop快捷键大全 - 2009-12-09

Photoshop常用快捷键 - 2009-12-09

---

- 文章评论 -

---

请输入您的评论
1442

[由于政策原因，您的留言如果提交成功后，需要审核才能展示，请改天再来查看，请不要重复提交，谢谢支持！]

- 最新评论[0条评论] -

---

[>>>点击查看更多评论]