firefox奇数填充使用锚标签

Question

我正在尝试通过添加背景制作achor标签按钮，虽然它在chrome和safari中看起来很好，但firefox 15.0.1似乎有一个bug。

例如，http://jsfiddle.net/cqVjj/3/表示文字甚至不是垂直居中的。我甚至没有指定填充，宽度或高度，但我期望与chrome相似的结果。 Firefox我在底部看到一个空格。

任何解决方案？

chrome 21.0.1

firefox 15.0.1

Answer 1

简单修复：

您缺少line-height属性。它必须与font-size：

的值相同

line-height: 34px;

我更新了你的jsfiddle：http://jsfiddle.net/cqVjj/4/

Answer 2

这与浏览器不一致。我建议你平衡间距和填充。见这里的例子：

http://jsfiddle.net/exzRT/

奇怪的是，将字体更改为像'Arial'这样的无衬线字体会有所帮助。

Answer 3

渲染将取决于浏览器使用的确切字体以及他们决定用于这些字体的确切上升和下降指标。请注意，您甚至不会告诉他们在您的小提琴中使用相同的字体系列。

但即便过去，CSS2.1对此事的评论是（来自http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced）：

The height of the content area should be based on the font, but this
specification does not specify how. A UA may, e.g., use the em-box or
the maximum ascender and descender of the font. 

我怀疑您正在查看的浏览器实际上只是使用内联内容区域的不同定义。