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

Question

按钮文本位置不同，无论是在firefox / chrome还是opera / ie。 我有一个按钮和文字。在歌剧中，它比firefox更低一些。

HTML:

    <button>
        some
    </button>

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

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

P.S。我用Google搜索了 - 没找到答案

编辑：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;

Answer 2

  

在资源管理器Windows和Opera中，结果出现了差异   在font-weight：600和font-weight：bold ...

之间

http://www.quirksmode.org/css/tests/iewin_fontweight.html

使用font-weight: 700;。

＆＃13;

＆＃13;

button {
	position: relative;
	width:145px;
	height:36px;
    line-height: 36px;
	border: 0;
	color:#fff;
	font-size:16px;
	font-weight:700;
	border-radius: 10px;
	font-family:"Myriad Pro", "Verdana", sans-serif, serif;
	background: -moz-linear-gradient(top, #00a885 49%, #009979 54%);
	background: -o-linear-gradient(top, #00a885 49%, #009979 54%);
	background: -webkit-linear-gradient(top, #00a885 49%, #009979 54%);
	background: -ms-linear-gradient(top, #00a885 49%, #009979 54%);
	margin:0;
	margin-top:14px;

	box-shadow: 1px 1px 4px rgba(0,0,0,0.64);
	text-shadow: 1px 1px 5px rgba(0,0,0,0.74);
	padding: 0;
}

＆＃13;

<button>some</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

所以我发现了问题。

我使用了随Photoshop安装的font-family“Myriad Pro”。每个浏览器似乎都呈现不同的字体，因此在字体系列更改后，问题就消失了。

很难找到但很容易解决的问题......