How to avoid different rendering of underline in Firefox and Chrome?

Question

Somehow Firefox does render the following two underlined Texts different from Chrome.

<a href="http://www.google.de"><span style="font-size: 48pt;">Text</span></a>
<span style="font-size: 48pt; text-decoration: underline;">Text</span>

For the anchor element (link) Firefox just generates a very thin line very close to the text. This looks very different from the normal underlining of the font. On the other hand, Chrome uses as expected a normal underline.

I like the Chrome way and would like to have it in Firefox as well. But how can I achieve this?

I read sometimes that people try to mimic the behavior by using the border-property. However, this does not exactly achieve the right result. Also, here on stackoverflow if you hover a link with a larger font then the underlining seems to work properly even in Firefox. But I was unable to figure out how they achieved this result.

Answer 1

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.)