按钮文本位置与浏览器不同

Question

无论是在 firefox/chrome 还是 opera/ie 中，按钮文本位置都不同。我有一个按钮和文字。在 Opera 中，它比在 Firefox 中低一点。

HTML:

    <button>
        some
    </button>

CSS:
    button {
        width:145px;
        height:36px;
        border: 0;
        color:#fff;
    }

如何防止文本按钮的这种“跳跃”？
还有一个额外的问题：可能有人知道如何防止浏览器中字体粗细的这种不同视觉？（参见图片）

PS我用谷歌搜索了它 - 没有找到答案

编辑：小提琴

EDIT_2：浏览器已更新到最新版本。（可能不包括 IE，但 Opera 也有这个问题）。操作系统：Windows 8.1 Industry Pro

Answer 1

您尚未定义字体大小和字体粗细，因此不同的浏览器将按钮字体视为自己的字体。明确设置这些可以解决问题：

button {
        width:145px;
        height:36px;
        border: 0;
        color:#fff;
        font: 16px normal Arial;/*change as per your requirement*/
    }

更新：

我针对按钮标签的关键问题找到了交叉解决方案。按钮的默认样式是display: inline-block;.

并且不同的浏览器确实有不同的垂直对齐（顶部，中间，...），因此将垂直对齐固定到按钮将解决问题。

因此，对于按钮 css，添加以下代码行：

vertical-align: middle;