html - 如何使用 CSS 规范化按钮和 anchor ？

Question

查看按钮和 anchor 的代码示例:http://jsbin.com/ecitex/2/edit

我试图让它们在所有浏览器中都相同。但差异仍然存在，并且在每个浏览器中都有不同的差异(尝试过 Chrome、Safari、Firefox、IE8)。

我缺少哪些 CSS 规范化？

---

更新:根据建议:

• 我添加了 line-height: 50px(虽然我的用户代理(Chrome)的默认 line-height 用于 button 元素是 正常的，而且它仍然垂直居中文本——怎么做？!)
• 我添加了 cursor: pointer 来标准化鼠标光标。

http://jsbin.com/ecitex/11/edit

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

---

更新 2:

看来 IE 的问题是已知且不可解决的:http://www.quirksmode.org/css/tests/mozie_button2.html

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

---

更新 3:

太棒了，我们解决了 Firefox 问题:http://jsbin.com/ecitex/15/edit

好的，到目前为止，每个答案都提供了部分解决方案，因此没有一个真正的最佳答案。我会将最佳答案授予满足以下任一条件的人:

• 解释了为什么我们必须指定 line-height: 50px 来使 a 中的文本垂直居中，而 button 垂直居中只有 line-height: normal 的文本。
• 提供 IE 问题的解决方案。

Answer 1

您可以使用以下方法在 Firefox 中删除多余的填充:

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

这是 Eric Meyer 关于行高的一个很好的解释，希望能解释为什么你需要明确地将它设置为 50px:http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/ .

这里有一些新的 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;
}