如何规范一个按钮，并用CSS锚？(How to normalize a button and an

检查出一个按钮，这个代码示例和锚： http://jsbin.com/ecitex/2/edit

我试图让他们在所有浏览器相同。但分歧依然存在，并在每个浏览器不同的差异（试过的Chrome，Safari浏览器，火狐，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上的填充任何东西，但。（在怪异模式文章提到在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;
}

下面是从埃里克迈耶约行高度希望解释了为什么你需要明确地将其设置为50像素一个很好的解释： http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/ 。

下面是固定的字体大小问题在IE浏览器的一些新的CSS：

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;
}

Answer 2:

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

演示

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
}