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

Question

按钮文本位置在 firefox/chrome 或 opera/ie 中是不同的。我有一个按钮和里面的文字。在 Opera 中，它比在 Firefox 中低一点。

HTML:

    <button>
        some
    </button>

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

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

附言我用谷歌搜索 - 没有找到答案

编辑:FIDDLE

EDIT_2:浏览器更新到最新版本。 (可能不包括 IE，但问题也在歌剧中)。操作系统: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;