Firefox 中的 HTML 按钮文本对齐方式

Question

使用此 CSS：

button {
    font-size: 14px;
    height: 25px;
    width: 25px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

我无法在 Firefox 中正确对齐某些文本。 例如：

火狐浏览器 (38.0.5)

铬

[+] 按钮的水平对齐在 Firefox 中已关闭，但在 Chrome 中却未关闭？ 这是怎么回事？我该如何解决？

JSFiddle：http://jsfiddle.net/oge3tg3n/2/

Answer 1

如果将高度和宽度增加到 27px，则在 Firefox 和 chrome 中对齐方式都将居中。

button {
   font-size: 14px;
   height: 27px;
   width: 27px;
   text-align: center;
   vertical-align: middle;
   padding: 0;
   margin-left: auto;
   margin-right: auto;
}

在 Firefox 38.0.5 中测试。

Answer 2

火狐

您可能会在 Firefox 中遇到此问题，并且可能需要额外的

font-family: inherit;