Firefox odd padding using anchor tags

Question

I am trying to create an ador tag button by adding a background, and although it looks great in chrome and safari, firefox 15.0.1 seems to have an error.

For example, http://jsfiddle.net/cqVjj/3/ shows that the text is not even vertically centered. I didn’t even indicate the registration, width or height, but I expect similar results like chrome. Firefox I see a place below.

Any solutions?

chrome 21.0.1

firefox 15.0.1

Answer 1

Simple fix:

You are missing the line-height attribute. This should be the same value as font-size :

line-height: 34px;

I updated your jsfiddle: http://jsfiddle.net/cqVjj/4/

Answer 2

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

http://jsfiddle.net/exzRT/

Oddly enough, changing the font to a sans-serif font like "Arial" helps.

Answer 3

Rendering will depend on the exact fonts used by browsers, and on the exact ascent and descent indicators that they choose to use for these fonts. Note that you do not even tell them to use the same font family in your violin.

But even in the past, what CSS2.1 has to say on this matter (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, eg, use the em-box or the maximum ascender and descender of the font. 

I suspect that the browsers you are looking at are actually just using different definitions of the inline content area.