I have an issue in Firefox 57 with ordered lists in html.
The html is dynamically generated, but an example looks like this:
<ol>
<li>ashdg</li>
<li>ashdg</li>
<li>ashdg</li>
</ol>
It has the following CSS
ol{
margin-top: 0px !important;
margin-bottom: 0px !important;
list-style-type: decimal !important;
list-style-position: inside !important;
}
p, ul, ol {
padding: 0;
margin: 0;
display: inline;
}
The firefox output

Chrome output

The bug, where display: inline causes a reset of the order in ordered lists seems to be fixed in current Firefox Versions! (Tested in Firefox 94, but it is likely that it was fixed way earlier).
This is casued by display: inline, but I don't know why this resets the order of lists in Firefox. I would not say this is intuitive and expected, so in my opinion, it is a bug. If the inline property is not necessary, just remove the ol in your CSS. If it is necesary (because you want them to be in one line), there is a workaround using float instead of display: inline.
ol{
margin-top: 0px !important;
margin-bottom: 0px !important;
list-style-type: decimal !important;
list-style-position: inside !important;
}
p, ul, /* ol <-- remove this, if not necessary */ {
padding: 0;
margin: 0;
display: inline;
}
/* add this, if necessary */
ol li {
float: left;
}
<ol>
<li>ashdg</li>
<li>ashdg</li>
<li>ashdg</li>
</ol>
Just replace this::
p, ul, ol {
padding: 0;
margin: 0;
display: inline;
}
by::
p, ul, ol {
padding: 0;
margin: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With