In my testing, I've come across an interesting issue. When a button is a direct descendent of a list item and its inner text wraps to multiple lines, I have noticed that on Firefox the bullet point lines up with the last line of the text instead of the first line, which looks odd. This behavior does not occur on Chrome.
I have tried to address the bullet point alignment issue using some unconventional methods, but I'm still uncertain whether this discrepancy is a result of a Firefox bug, a Chrome bug, a gap in the specifications, or if there is a misunderstanding on my part regarding the styles that are impacting this layout.
Interestingly, this problem seems to be isolated to button elements. When I use spans instead, the display is consistent. Take a look at this example:
<ul style="width: 300px;">
<li>In Chrome, this list item appears fine, but in Firefox it is misaligned:</li>
<li><button>This is just dummy text to illustrate the issue, which only occurs when text wraps to a second line.</button></li>
<li><span>An inline span works properly when text wraps, as demonstrated here. So, theoretically, display:inline should work for the button as well. However, even an inline button is misaligned in Firefox:</span></li>
<li><button style="display:inline;">This is just dummy text to illustrate the issue, which only occurs when text wraps to a second line.</button></li>
<li><span style="display:inline-block;">An inline-block span shows misaligned bullet points in all browsers when text wraps to multiple lines.</span></li>
</ul>