在 Chrome/Firefox 中使用 <i> 图标和文本样式化 <button>

Question

我有 <button> 标记，其中包含 <i> 元素，用于在文本之前显示图标。

这是 HTML

<button>
    <i></i>
    Login Using Facebook
</button>

里面<i>是用来显示图标的。通常对于<a>等其他标签，我可以使用:before伪类来显示图标，但对于<button>标签，我似乎不能这样做。

这是CSS

button {
    background: #4a6ea9;
    color: #fff;
    font-weight: bold;
    line-height: 24px;
    border: 1px solid #4a6ea9;
    vertical-align: top;
}
button i {
    background: url('http://icons.iconarchive.com/icons/danleech/simple/24/facebook-icon.png');
    display: inline-block;
    height: 24px;
    width: 24px;
    border-right: 1px dotted #fff;
}

这是小提琴

http://jsfiddle.net/petrabarus/SDh3M

我的 Chrome 28.0.1500.95 for Linux 中的第一个初始显示如下所示

顶部和底部看起来有点不平衡（我不是设计师也不是前端工程师，但我能感觉到它很不平衡），所以我可以简单地添加填充 padding: 4px 6px 1px 6px; 然后它在我的 Chrome 中看起来更平衡，如下所示（在你的 Chrome 中看起来不同吗？）

虽然，我不知道为什么标签似乎为图标和文本添加了填充。我将图标的大小设置为 24x24 像素，将文本的 line-height 设置为 24 像素，但按钮的最终高度为 32 像素。是否可以删除填充？

而且最大的问题是在火狐（我的Linux版本是17.0.1），文字似乎显示在底部附近，看起来很不平衡

用于修复 Chrome 的填充使 Firefox 的情况变得更糟。

是否有可能让它在两种浏览器中看起来完全相同（对于其他现代浏览器，如 Opera 和 Safari 来说几乎一样）？

Answer 1

试试下面的css。

button i {
    background: url("http://icons.iconarchive.com/icons/danleech/simple/24/facebook-icon.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-right: 1px dotted #FFFFFF;
    display: inline-block;
    float: left; /*New Edit*/
    height: 24px;
    width: 24px;
}