CSS list-style-position在Safari与Chrome/Firefox的换行表现差异问询

问题复现代码 #

CSS

ol {
    padding-left: 2ch;
    margin: 0.9ch 0;
    list-style-position: inside;
}

HTML

<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>

现象差异 #

• Chrome/Firefox中：列表序号与<li>内的<p>文本分两行显示（列表项换行）
• Safari中：列表序号与<p>文本保持在同一行显示
• 注：设置list-style-position: inside是为修复Safari默认outside模式下，序号因padding-left:2ch不足被截断的问题（仅Safari会将序号渲染在容器外部）

差异原因分析 #

1. 块级元素内部布局逻辑不同
   Chrome和Firefox遵循标准块级元素布局规则：<li>是块级容器，内部的<p>（块级元素）会独占整行宽度，因此inside模式下的序号（属于<li>内联内容）会被挤到<p>上方换行。
   Safari对该场景做了特殊处理：将list-style-position: inside生成的序号视为<li>的内联内容，同时调整了<li>内部<p>元素的默认布局行为（如压缩外边距、允许内联内容与块级元素同行），让序号和<p>文本能在同一行展示。

2. 用户代理样式表的细微差异
   不同浏览器的默认样式对<p>、<li>的margin/padding设置有区别：

   • Chrome/Firefox中<p>默认带有上下外边距，且块级特性强制换行
   • Safari在<p>作为<li>直接子元素且list-style-position: inside时，修改了<p>的默认样式，弱化了块级元素的换行特性

3. 元素display属性澄清
   Safari中<p>、<li>、<ol>依然是标准块级/列表元素（display: block/list-item），并非inline类型，差异核心在于块级元素内部的布局逻辑，而非元素本身的display属性。

统一渲染的可选方案 #

如果需要跨浏览器保持一致效果，可尝试：

• 移除<li>内部的<p>标签，直接将文本放在<li>中
• 给<li>内的<p>设置display: inline或inline-block，并调整margin/padding消除额外间距
• 改用list-style-position: outside，同时增大ol的padding-left（如设为3ch），避免Safari下序号被截断

内容的提问来源于stack exchange，提问作者sudoExclamationExclamation