Firefox的奇怪填充使用锚点标签 [英] firefox odd padding using anchor tags

问题描述

我试图通过添加一个背景来制作一个achor标签按钮，虽然在Chrome浏览器和Safari浏览器中看起来很好，但是firefox 15.0.1似乎有一个bug。

例如，）：

 内容区域的高度应该基于字体，但是这个
规范没有指定如何。 UA可以例如使用em-box或
作为字体的最大上行和下行。 
  

我怀疑你正在浏览的浏览器其实只是使用不同的内容区域的内联。

I'm trying to make an achor tag button by adding a background, and while it looks fine in chrome and safari, firefox 15.0.1 seems to have a bug.

For example, http://jsfiddle.net/cqVjj/3/ shows that the text is not even vertically centered. I didn't even specify padding, width, or height, but I expect similar results as chrome. Firefox I see a space at the bottom.

Any solutions?

chrome 21.0.1

firefox 15.0.1

解决方案

The rendering will depend on the exact fonts the browsers are using and on the exact ascent and descent metrics they decide to use for those fonts. Note that you're not even telling them to use the same font family in your fiddle.

But even past that, what CSS2.1 has to say on the matter is (from 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. 

I suspect that the browsers you're looking at are in fact just using different definitions of the content area of the inline.

这篇关于Firefox的奇怪填充使用锚点标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！