4

This is very minor, but I decided to report it anyway:

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.

I use Firefox 74.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. – Jan Wichelmann 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
  • Renders correctly on Edge 44.18362.449.0, looks like it's just a Firefox thing. – Spevacus Mar 10 at 16:42
  • 1
    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

You must log in to answer this question.

Browse other questions tagged .