使用<i>图标和Chrome / Firefox中的文本</i> </button>设置<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中看起来像下面那样平衡（你的看起来有什么不同吗？）

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

最大的问题是Firefox（我的版本是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;
}