Code snippet link text conflicts with underline in Firefox

Question

On my browser, the Show code snippet link for the code snippet

alert("This is some example code");

renders as follows:

It looks like the line and the text are in separate elements, allowing the text to be drawn above the line. Moving text-decoration: underline from the surrounding <a> tag to the <span> tag fixes the problem for me.

Removing the vertical-align: middle; from the inner <span> works just as well.

The recent post formatting update didn't fix the problem.

I use Firefox 90.0 64-bit on Windows 10, without any extensions. The bug has also been present since (at least) Firefox 74.0.

The same issue occurs in the Firefox Android app.

In Chrome >= 80.0, it renders correctly.

Answer 1

As noted in the comments, this can be worked around by overriding the vertical-align: middle setting in the style attribute.

Thus, until this is fixed, you can use the following custom CSS rule (e.g., via the Stylus add-on):

a.snippet-show-link span {
    vertical-align: baseline !important;
}