如何使用 CSS 规范化按钮和锚点？答案

【问题标题】：How to normalize a button and an anchor with CSS?如何使用 CSS 规范化按钮和锚点？
【发布时间】：2012-11-12 16:20:46
【问题描述】：

查看此按钮和锚点的代码示例：http://jsbin.com/ecitex/2/edit

我正在尝试使它们在所有浏览器中都相同。但是仍然存在差异，并且每个浏览器（尝试过 Chrome、Safari、Firefox、IE8）都有不同的差异。

我缺少哪些 CSS 规范化？

更新： 根据建议：

我添加了line-height: 50px（尽管我的用户代理（Chrome 的）默认line-height 用于button 元素是normal，但它仍然垂直居中文本 - 怎么样？！）
我添加了cursor: pointer 来规范鼠标光标。

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

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

更新 2：

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

我在 Firefox 的 padding 上没有找到任何东西。（quirksmode 文章提到了 Mozilla 的一个问题，但这是一个不同的问题。）

更新 3：

太棒了，我们修复了 Firefox 问题：http://jsbin.com/ecitex/15/edit

好的，到目前为止，每个答案都提供了解决方案的一部分，因此实际上并没有一个最佳答案。我会给满足以下任一条件的人提供最佳答案：

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

【问题讨论】：

标签： html css button anchor

【解决方案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;
}

【讨论】：

【解决方案2】：

您需要使用line-height 属性使您的锚标记文本垂直居中

Demo

CSS

button, a {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 10px 0;
  padding: 0;
  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; <-------- Here
}

【讨论】：

【解决方案3】：

添加属性cursor:pointer;以便在鼠标悬停时添加指针（输入并不总是有它）

最后使用line-height:46px; 进行垂直对齐

完整代码在这里 -> http://jsbin.com/ecitex/10/edit

【讨论】：