頁面代碼：
<div class="toolbar">
<a href="https://bbs.csdn.net/topics/#" class="toolbar-item toolbar-item-weixin">
<span class="toolbar-layer"></span>
</a>
<a href="https://user.qzone.qq.com/3174754103" target="_blank" class="toolbar-item toolbar-item-feedback"></a>
<a href="http://weibo.com/u/5142081895" target="_blank" class="toolbar-item toolbar-item-app">
<span class="toolbar-layer"></span>
</a>
<a href="javascript:scroll(0,0)" id="top" class="toolbar-item toolbar-item-top"></a>
</div>
CSS：
/* CSS Document右下角回傳頂部 */
.toolbar-item,.toolbar-layer{background:url(../img/toolbar.png) no-repeat;}
.toolbar{
position: fixed;
right: 0px;
bottom: 0px;
text-align: right;
}/*假設網頁寬度為1200px，導航條在右側懸浮*/
.toolbar-item{display:block;width:52px;height:52px;margin-top:1px;position:relative;-moz-transition:background-position 1s;-ms-transition:background-position 1s;-o-moz-transition:background-position 1s;-webkit-moz-transition:background-position 1s;transition:background-position 1s;}
.toolbar-item:hover .toolbar-layer{opacity:1;filter:alpha(opacity=100);transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);}
.toolbar-item-weixin{background-position:0 -798px;}
.toolbar-item-weixin:hover{background-position:0 -860px;}
.toolbar-item-weixin .toolbar-layer{height:212px;background-position:0 0;}
.toolbar-item-feedback{background-position:0 -426px;}
.toolbar-item-feedback:hover{background-position:0 -488px;}
.toolbar-item-app{background-position:0 -550px;}
.toolbar-item-app:hover{background-position:0 -612px;}
.toolbar-item-app .toolbar-layer{height:194px;background-position:0 -222px;}
.toolbar-item-top{background-position:0 -674px;}
.toolbar-item-top:hover{background-position:0 -736px;}
.toolbar-layer{position:absolute;right:46px;bottom:-10px;width:172px;opacity:0;filter:alpha(opacity=0);
transform-origin: 95% 95%;-moz-transform-origin: 95% 95%;-ms-transform-origin: 95% 95%;-o-transform-origin: 95% 95%;-webkit-transform-origin: 95% 95%;transform:scale(0.01);
-moz-transform:scale(0.01);-ms-transform:scale(0.01);-o-transform:scale(0.01);-webkit-transform:scale(0.01);transition:all 1s;-moz-transition:all 1s;-ms-transition:all 1s;-o-transition:all 1s;-webkit-transition:all 1s;}
/* CSS Document右下角回傳頂部結束*/
瀏覽器極速模式下顯示正常，兼容模式下不是顯示在瀏覽器底部，而是顯示在網頁底部，怎么解決兼容問題，固定顯示在瀏覽器底部。
如圖：
uj5u.com熱心網友回復：
什么公司要用兼容模式，要么用ie要么用chromeuj5u.com熱心網友回復：
這篇文章或許可以幫助你。https://blog.csdn.net/aoxiu2833/article/details/101582777
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/59680.html
標籤：HTML(CSS)
上一篇：jquery修改url