17

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

Improve this question
13
  • 1
    That’s not a text and a line, it’s a link with an underline: text-decoration: underline; Commented Mar 10, 2020 at 15:06
  • @AryanBeezadhur Good observation, moving this rule from <a> to <span> fixes the problem for me. Commented Mar 10, 2020 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. Commented Mar 10, 2020 at 16:38
  • 2
    Renders correctly on Edge 44.18362.449.0, looks like it's just a Firefox thing. Commented Mar 10, 2020 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. Commented Mar 10, 2020 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? Commented Jul 1, 2020 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. Commented Feb 21, 2021 at 8:43
  • 1
    Can confirm that I'm seeing this in the latest version of Firefox (101.0) in Windows 10 as well. (...And that I'm not seeing it in the latest version of Chrome (102.0.5005.61) on Mac OS Monterey.) Commented Jun 9, 2022 at 0:24
  • I'm not seeing this issue occur in Firefox 122.0 on Mac OS Sonoma (14.2.1). Commented Feb 6, 2024 at 17:07
  • I don't see this on the most recent version of Firefox (132) on MacOS — is this still reproduceable on the latest version of Firefox on Windows? Commented Nov 5, 2024 at 0:35
  • @JNat Yes, it is still not rendered correctly in Firefox 132.0.1 on Windows. Interesting that there is a difference between OSes. I will check for Linux later. Commented Nov 5, 2024 at 7:54
  • @JNat Still broken in Firefox 130 on Fedora as well (did not update yet, but it will probably not change the result). Commented Nov 5, 2024 at 16:19
  • Not only in firefox, but also in microsoft edge 132.0.2957.118 (android) Commented Jan 31, 2025 at 16:58

1 Answer 1

Reset to default
5

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;
}
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.