在Chrome / Safari中,我在引导按钮中的图标看起来很好:
但在Firefox中,图标下降了一行:
我在< button>内浮动了fontawesome图标.
<!--html--> <div class="btn-group btn-group-justified" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-small">Cached logs<i class="fa fa-money"></i></button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button> </div> </div> <!--style--> i.fa { float: right; top: 2px; position: relative; font-size: 12pt; } .glyphicon,i.fa { color: rgb(90,90,90); top: 1px; }
如何使Firefox版本像Chrome一样?
解决方法
将图标移动到文本的左侧.我不确定它与你如何得到它的不一致的根本原因 – 但这确实使两个浏览器一致地呈现它.
<button type="button" class="btn btn-default btn-small"><i class="fa fa-database"></i>Logs on mount</button>
代替
<button type="button" class="btn btn-default btn-small">Logs on mount<i class="fa fa-database"></i></button>
原文地址:https://www.jb51.cc/css/242391.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。