CSS list-style-position 在 Firefox/Chrome 上会产生换行符，但在 Safari 上不会产生换行符

Question

我有以下简单的 HTML 来演示该问题：

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>

在 Safari 上，这呈现为：

在 Firefox 和 Chrome 上，它呈现为：

如您所见，在 Firefox 和 Chrome 上，列表项将进入下一行。有人在这里提出了类似的问题：

CSS list-style-position 在我不想要的时候会换行

但是，他们没有提出关于 Safari 和 Firefox/Chrome 之间差异的问题。

我添加

list-style-position: inside;

的原因是因为另一个问题，Safari 和 Firefox/Chrome 之间的工作方式也不同。如果没有它，

1. 2. 3.

项目符号点只能在 Safari 上呈现，而

padding-left: 2ch;

仅在 Safari 上是不够的。这导致数字被剪裁。

为什么浏览器之间存在差异？

p

、

li

和

ol

标签在 Safari 中的工作方式是否不同（内联而不是其他问题中提到的块）？

Answer 1

由于它在不同的浏览器中呈现方式不同，并且您在非块元素内部有一个块级元素，因此您无论如何都需要更改这些标签之一或两个的显示。

另一种方法是使用默认情况下已经是

display:inline

的不同标签，例如

<span>

。这仅取决于您的目标是什么