如何让<input>（type为button），<button>和<a>表现的一致的（大小等）

Question

如何让<input>（type为button），<button>和表现的一致的（大小等）

比如说我写了一个class，给这几个标签使用。

但是表现的不一样啊，请问该怎么解决呢，以下是我的代码

.info-button {
    background-color: #1ba2f4;
    border-radius: 4px;
    border: none;
    padding: 6px 8px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    margin: 0px;
    line-height: normal;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

在 Safari 下面的表现：

然后在 Chrome 下居然是这样的：

左边是 input 右边是 a

先谢谢大家的解答了！

Answer 1

再试了一下，发现再加上一个 font-family 的属性就表现得一致了。

Answer 2

这种浏览器兼容性的问题真的不适合浪费时间，你直接都换成input或者button不就解决了么？不同浏览器的解析是不一样的，研究这个真的是纯浪费时间。

Answer 3

跟浏览器渲染有关系，每家浏览器解析出来不一样。