4

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.

I use Firefox 77.0 64-bit on Windows 10, without any extensions. In Chrome >=80.0, it renders correctly.

  • 1
    That’s not a text and a line, it’s a link with an underline: text-decoration: underline; – Aryan Beezadhur Mar 10 at 15:06
  • @AryanBeezadhur Good observation, moving this rule from <a> to <span> fixes the problem for me. – janw Mar 10 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 at 16:38
  • 2
    Renders correctly on Edge 44.18362.449.0, looks like it's just a Firefox thing. – Spevacus Mar 10 at 16:42
  • 2
    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 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 at 15:44

You must log in to answer this question.

Browse other questions tagged .