Search code examples
javascripthtmlcsssafari

CSS list-style-position makes line breaks on Firefox/Chrome but not on Safari

I have the following simple HTML to demonstrate the issue:

ol {
    padding-left: 2ch;
    margin: 0.9ch 0;
    list-style-position: inside;
}
<div class="bodyContainer markdownContainer">
    <p>Some stuff some stuff stuff some stuff stuff some stuff stuff some stuff</p>
    <ol>
        <li><p>Item 1</p></li>
        <li><p>Item 2</p></li>
        <li><p>Item 3</p></li>
        <li><p>Item 4</p></li>
    </ol>
    <p>Bottom text</p>
</div>

On Safari, this renders as:

enter image description here

On Firefox and Chrome, it renders as:

enter image description here

As you can see, the list items are going into next line on Firefox and Chrome. Someone raised a similar issue here:

CSS list-style-position makes line breaks when I don't want it

However, they didn't have the question about differences in Safari and Firefox/Chrome.

The reason I added list-style-position: inside; was because of another issue which was also working differently between Safari and Firefox/Chrome. Without it, the 1. 2. 3. bullet points were rendering outside only on safari and the padding-left: 2ch; was not sufficient only on Safari. This was causing the numbers to be clipped.

Why's this different between browsers? Do p, li, and ol tags work differently in Safari (inline instead of block as mentioned in that other question)?

Solution

  • Since it renders differently in different browsers AND you have a block level element inside of a non-block element, you'll need to change the display of one or both of those tags anyway.

    An alternative is to use a different tag that's already display:inline by default, like a <span> instead. It just depends what you goal is here