Yesterday I made an edit that produced some unexpected output. It seems that when an item in an ordered or unordered list begins with a code block, in (at least) Firefox (but not Chrome) the list item marker is not vertically aligned with the content of the list item. As you can see in the first screenshot below, for such list items the marker appears to be aligned between the first and second line of code, and when there is only one line of code the marker appears to be aligned with the bottom of the item content. @Laurel also reports in the comments that for such list items the marker is missing entirely in Chrome and Safari for iOS.
Markdown input
1. The first list item is one line of text.
2. ```lang-c
/* The second list item is one line of code. */
```
3. The third list item is three lines of text.
The third list item is three lines of text.
The third list item is three lines of text.
4. ```lang-c
/* The fourth list item is three lines of code.
The fourth list item is three lines of code.
The fourth list item is three lines of code. */
```
5. The fifth list item is one line of text followed by three lines of code.
```lang-c
/* The fifth list item is one line of text followed by three lines of code.
The fifth list item is one line of text followed by three lines of code.
The fifth list item is one line of text followed by three lines of code. */
```
6. ```lang-c
/* The sixth list item is three lines of codes followed by one line of text.
The sixth list item is three lines of codes followed by one line of text.
The sixth list item is three lines of codes followed by one line of text. */
```
The sixth list item is three lines of codes followed by one line of text.
Markdown output
Incorrectly aligned list item markers in 64-bit Firefox v101.0.1 for Windows
Correctly aligned list item markers in 64-bit Chrome v102.0.5005.115 for Windows
Missing list item markers in Chrome for iOS
Your browser
The first list item is one line of text.
-
/* The second list item is one line of code. */
The third list item is three lines of text.
The third list item is three lines of text.
The third list item is three lines of text.
-
/* The fourth list item is three lines of code. The fourth list item is three lines of code. The fourth list item is three lines of code. */
The fifth list item is one line of text followed by three lines of code.
/* The fifth list item is one line of text followed by three lines of code. The fifth list item is one line of text followed by three lines of code. The fifth list item is one line of text followed by three lines of code. */
-
/* The sixth list item is three lines of codes followed by one line of text. The sixth list item is three lines of codes followed by one line of text. The sixth list item is three lines of codes followed by one line of text. */
The sixth list item is three lines of codes followed by one line of text.
padding-top
for the<pre>
, which is the first element in the<li>
, is used for the::marker
instead of the actualpadding-top
. For the issue to occur, eitheroverflow-x
and/oroverflow-y
needs to be set on the<pre>
such that scrolling may occur (auto
is used by SE). As long as the above two CSS properties are set (padding-top
andoverflow
), this is reproducible independent of SE's CSS. Overall, I'd say this is a bug in Firefox. I tested in Firefox 101.0.0. This is not nearly as noticeable without the12px
SE uses for padding code blocks.