html - 并且似乎有不同的线高，如何绕过它？

Question

该按钮比具有相同样式的 a 标签大 2px。有什么想法为什么要这样做以及如何解决它？

jsfiddle

<a href="">Some Text</a>
<button> Some Text</button>

a, button {
  background-color: red;
  border: none;
  text-decoration: none;
  font-size: 14px;
  line-height: 14px;
  font-family: Verdana;
  display: inline-block;
  color:black;
  padding:0;
}

Answer 1

按钮有填充。设置padding : 0;在按钮上，它们看起来一样

Firefox 有它自己的东西...尝试添加以下内容：

button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}