css - 使用锚标签的Firefox奇数填充

Question

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

例如，http://jsfiddle.net/cqVjj/3/显示文本甚至没有垂直居中。我什至没有指定填充、宽度或高度，但我希望得到与 chrome 类似的结果。Firefox 我在底部看到一个空格。

有什么解决办法吗？

铬 21.0.1

火狐15.0.1

Answer 1

简单修复：

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

line-height: 34px;

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

Answer 2

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

但即便如此，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. 

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

Answer 3

This is not consistent through browsers. I suggest you balance spacing with padding. See example here:

http://jsfiddle.net/exzRT/

Strangely enough changing the font to a sans-serif font like 'Arial' helps.