The reason is that in the first case, the font size of the a
element is whatever you have set it elsewhere or defaulted (typically, to 12pt). Firefox draws the underline to match the font size of the element (the same as you would get e.g. with just <u>foo</u>
), which is rather logical: the width and the vertical position should be compatible with the font size.
In he given case, the a
element has no other content but a span
element, with font size set on it. Yet, in the document object model, the a
element has a font size set on it (and if it inherits it, it inherits from the parent, never from a child).
The solution is to make sure that any underlined element has font size suitably set on the element itself (either specifically set on it or via inheritance). In the example, you can simply dispense with the span
element:
<a href="http://www.google.de" style="font-size: 48pt;">Text</a>
(Just an example, not meant to promote style
attributes, setting font sizes in physical units, or setting them to huge values.)