HTML 纯CSS浮窗兼容IE6+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML 纯CSS浮窗兼容IE6+</title> <style> /* body容器设置 */ body { /* IE6中需要为body添加如下两个样式属性,才能完美实现固定浮动 */ _background-attachment: fixed; _background-image: url(about:blank); } /* 固定浮动 */ .fix-top { position: fixed; _position: absolute; /* 兼容IE6 */ right: 0; bottom: 20px; z-index: 99; /* 兼容IE6,_top属性的表达式可能根据浮动的位置不同而所有不同,请自行更改 */ _bottom: auto; _top: expression( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - 20 ); /*浮窗的样式*/ width: 40px; height: 40px; background: #f60; text-align: center; line-height: 20px; color: #fff; text-decoration: none; } </style> </head> <body> <div style="height: 1500px">阅谁问君诵,水落清香浮</div> <a class="fix-top" href="#">回到顶部</a> </body> </html>
效果图:
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18