This bug I just encountered in Firefox is almost legal drinking age in the US: https://bugzilla.mozilla.org/show_bug.cgi?id=36854
So if you want to work around list-style-position being broken for 20 years, do this: hide the standard list counters, use a custom counter, and set it to display in the ::before pseudo-element of your header. That provides the same effect.
e..g,
ol {
counter-reset: index;
}
ol li {
counter-increment: index;
list-style-type: none;
}
ol li h3::before {
content: counter(index) '. ';
}
@aral In the example https://bug36854.bmoattachments.org/attachment.cgi?id=711606 is there a good reason to use block elements inside the <li> tags? I get that <div> is block by default, and li>div { display: inline; } could also resolve the issue (in maybe a dirtier way), but why has the example explicitly set the <a> elements to display: block? Is there an accessibility or flow-on reason to do so that I'm missing?
@aral and now I'm guessing your fix is more complex to resolve it without breaking it in browsers other than Firefox. Carry on.
@aral I get that, I just wondered why you wouldn't be able to do something like
li>h3 { display: inline; }
I figured there must be a reason the example explicitly set the <a> tag to block but I guess it was just to show the broken behaviour.