9

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

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

我缺少哪些 CSS 规范化？

更新： 根据建议：

  • 我添加了（尽管我的用户代理（Chrome的line-height: 50px）默认元素是，但它仍然垂直居中文本 - 怎么样？！）line-heightbuttonnormal
  • 我添加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

好的，到目前为止，每个答案都提供了解决方案的一部分，因此实际上并没有一个最佳答案。我将向以下人员提供最佳答案：

  • 解释了为什么我们必须指定 aline-height: 50px以在 an中垂直居中文本a，而 abutton仅具有垂直居中的文本line-height: normal。
  • 为 IE 问题提供解决方案。
4

3 回答 3

9

您可以使用以下方法删除 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;
}
于 2012-11-14T16:55:59.543 回答
4

您需要使用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
}
于 2012-11-12T16:22:59.423 回答
2

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

最后 line-height:46px;用于垂直对齐

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

于 2012-11-12T16:31:18.410 回答