Chrome中多列有序列表项目标记渲染异常：编号缺失问题

我之前也踩过这个Chrome的坑——当给<ol>设置column-count实现多列布局时，列表项的原生编号会莫名其妙消失或者显示异常，确实挺头疼的。

先还原一下问题场景的测试代码：

<!DOCTYPE html>
<html>
<head>
    <title>Testing li number in column</title>
</head>
<body>
    <ol style="column-count:3">
        <li>This is item 1.</li>
        <li>This is item 2.</li>
        <li>This is item 3.</li>
        <li>This is item 4.</li>
        <li>This is item 5.</li>
    </ol>
</body>
</html>

问题原因 #

这是Chrome渲染引擎的一个已知兼容性问题：多列布局模块在处理列表项的编号定位时，没有正确计算列分割后的元素位置，导致原生编号被渲染到了不可见的区域，或者直接被忽略。

几种可行的解决方案 #

方案1：用CSS计数器替代原生编号（最可靠，适配column-count场景）

完全绕过浏览器原生的列表编号逻辑，手动通过CSS计数器生成并控制编号的显示：

ol {
    column-count: 3;
    list-style: none; /* 隐藏原生编号 */
    counter-reset: list-counter; /* 初始化计数器 */
    padding-left: 0; /* 清除默认内边距 */
}

ol li {
    counter-increment: list-counter; /* 每个列表项递增计数器 */
    position: relative;
    padding-left: 20px; /* 给编号预留位置 */
    margin-bottom: 8px; /* 可选：增加列表项间距 */
}

ol li::before {
    content: counter(list-counter) "."; /* 显示计数器值 */
    position: absolute;
    left: 0;
    font-weight: normal; /* 可选：调整编号样式 */
}

方案2：用Flex布局模拟多列（适合固定列数、内容无需跨列的场景）

如果不需要内容自动跨列换行，用Flex的flex-wrap实现多列，原生编号可以正常显示：

ol {
    display: flex;
    flex-wrap: wrap;
    list-style: decimal; /* 保留原生编号 */
    padding-left: 2em; /* 保持默认缩进 */
    gap: 10px; /* 可选：设置列间距 */
}

ol li {
    width: calc(33.33% - 10px); /* 每列占1/3宽度，减去gap的宽度 */
    box-sizing: border-box;
}

方案3：用Grid布局实现多列（灵活度更高）

Grid布局对列表的支持更友好，也能完美保留原生编号：

ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
    list-style: decimal;
    padding-left: 2em;
    gap: 15px; /* 可选：设置列/行间距 */
}

选择建议 #

• 如果必须使用column-count（比如需要长文本自动跨列），优先选CSS计数器方案；
• 如果只是需要固定列数的卡片式布局，Flex或Grid方案更简洁，还能保留列表的语义化结构。

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