Html 如何用CSS规范化按钮和锚点？

查看按钮和锚点的代码示例：

我试图使它们在所有浏览器中都相同。但差异依然存在，每个浏览器都有不同的差异（试过Chrome、Safari、Firefox和IE8）

我缺少哪些CSS规范化

---

更新： 根据建议：

• 我添加了

  行高：50px

  （虽然我的用户代理（Chrome）默认

  按钮的
  行高
  元素是
  正常的
  ，但它仍然垂直居中文本–如何？！）

• 我添加了

  cursor:pointer

  来规范鼠标光标

那么，现在看看Firefox中的结果：注意到按钮上的填充物了吗？ 然后查看IE8中的结果：哇，注意到这两个是如何完全不同的

---

更新2:

IE的问题似乎是已知的，无法解决：

不过，我还没有在Firefox的填充物上找到任何东西。（quirksmode文章提到了Mozilla的一个问题，但那是另一个问题。）

---

更新3:

太棒了，我们修复了Firefox的问题：

好的，到目前为止，每个答案都提供了解决方案的一部分，所以实际上没有一个最佳答案。我会给这个人一个最好的答案：

• 解释为什么我们必须指定

  行高：50px

  以使

  a

  中的文本垂直居中，而

  按钮的文本垂直居中，只有
  行高：正常

• 为IE问题提供解决方案

---

您需要使用

行高

属性使锚定标记文本垂直居中

CSS

按钮，一个{
显示：内联块；
-webkit外观：无；
-moz外观：无；
外观：无；
利润率：10px0；
填充：0；
高度：50px；
边框宽度：0；
背景色：红色；
颜色：白色；
字体系列：无衬线；
字体大小：正常；
字体大小：继承；
文字装饰：无；
行高：50px；添加属性
cursor:pointer；
，以便在鼠标悬停时添加指针（输入并不总是有指针）

最后使用
行高：46px；
进行垂直对齐

完整代码在这里->
您可以使用以下方法删除Firefox中的额外填充：

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

下面是Eric Meyer关于线高度的一个很好的解释，希望能解释为什么需要显式地将其设置为50px:

以下是一些新的CSS，修复了IE中的字体大小问题：

button, a {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 10px 0;
  padding: 0px;
  height: 50px;
  border-width: 0;
  background-color: Red;
  color: White;
  font-family: sans-serif;
  font-weight: normal;
  font-size: inherit;
  text-decoration: none;
  line-height: 50px;
  cursor: pointer;
  font-size: 100%;
}
button {
  #width:0px;
  overflow: visible;
}
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button, a {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 10px 0;
  padding: 0px;
  height: 50px;
  border-width: 0;
  background-color: Red;
  color: White;
  font-family: sans-serif;
  font-weight: normal;
  font-size: inherit;
  text-decoration: none;
  line-height: 50px;
  cursor: pointer;
  font-size: 100%;
}
button {
  #width:0px;
  overflow: visible;
}
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}