9

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

alert("This is some example code");

renders as follows:

"Show code snippet" with broken underline

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.

GIF animation showing the enabling and disabling of CSS properties and the effect of doing so.

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

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

In Chrome >=80.0, it renders correctly.

7
  • 1
    That’s not a text and a line, it’s a link with an underline: text-decoration: underline; – Aryan Beezadhur Mar 10 '20 at 15:06
  • @AryanBeezadhur Good observation, moving this rule from <a> to <span> fixes the problem for me. – janw Mar 10 '20 at 16:31
  • If you have a userscript manager for Firefox, then you can create a user script that will fix the problem all the time. – Aryan Beezadhur Mar 10 '20 at 16:38
  • 2
    Renders correctly on Edge 44.18362.449.0, looks like it's just a Firefox thing. – Spevacus Mar 10 '20 at 16:42
  • 3
    The issue seems to be the vertical-align: middle; rule on the inner span element which moves the text slightly downwords, so it overlaps the underline. Removing that rule fixes the issue as well. – Tom Mar 10 '20 at 17:40
  • @Aryan Well not right now, since after the bug gets shortly fixed that extension will be useless afterward. It's not really a big deal anyway, right? – mindstormsboi Jul 1 '20 at 15:44
  • 1
    On Firefox 85.0.2, still having this problem. Here's a GIF showing the CSS changes affecting it. Why does it have a forced underline anyway? Most other links don't have underline even on hover. Let's keep it consistent for all links. The right-pointing triangle and blue color already indicative enough that the element should do something on a click. – ADTC Feb 21 at 8:43
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;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .