怎样解决CSS counter计数器在老旧移动端浏览器上的重置错误？-css教程-PHP中文网

iOS Safari ≤16.6 中子 ul 的 counter-reset 不生效，是因为 display: flex 的父 li 阻断了计数作用域，需将 counter-reset 移至父 li 并设 display: block；IE11 和 Android 4.4 WebView 中 counters() 不支持或分隔符错位，应降级为单级 counter() 加 data-level 标记；CSS 计数器不响应 DOM 增删，动态场景需 JS 控制；Obsidian 等环境中须用局部容器加作用域前缀避免全局污染。

怎样解决css counter计数器在老旧移动端浏览器上的重置错误？

为什么 iOS Safari ≤16.6 中子 ul 的 counter-reset 不生效？

根本不是写法错，而是 display: flex 的父 li 阻断了计数作用域——counter-reset 只在生成块级格式化上下文（BFC）的元素上才创建新计数器作用域，而 display: flex 或 inline 会让父容器无法触发该上下文，导致子 ul 继承而非重置计数器。

不要把 counter-reset: item 写在子 ul 上，它此时没用
改写到父 li 上，并显式设 li { display: block; }
避免 float、inline-block 或 contain: layout，它们都会干扰 BFC 创建

IE11 和 Android 4.4 WebView 怎么让多级编号勉强可用？

counters() 在这些环境里完全不支持或分隔符错位（比如输出 1..1 而非 1.1），不能硬扛，得降级。

放弃 counters(section, ".")，改用单级 counter(section) + 手动 HTML 层级标记（如加 data-level="2"）
分隔符只能用英文点 "."、短横 "-" 或斜杠 "/"，禁用空格或中文
counters() 第二个参数必须是字符串字面量，counters(step, var(--sep)) 这种写法直接被忽略

动态插入/删除 DOM 后编号卡在旧值怎么办？

CSS 计数器不响应 DOM 增删，这是规范行为，不是 bug。删除一个 li 后编号不会自动重排，新增项也不会“填补空缺”。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

不要依赖 display: none 隐藏来跳过计数——它仍会 counter-increment
真要跳过，用 visibility: hidden + counter-increment: none
若需实时重排（如拖拽排序），CSS 计数器不适合，应改用 JS 生成序号并写入 data- 属性

Obsidian 或其他富文本编辑器里 counter-reset 全是 “Fig. 1”？

不是 CSS 写错了，是作用域失控：Obsidian 把笔记内容注入已有 DOM，全局 body { counter-reset: figureCounter } 会被多个笔记复用，每次渲染都重置。

弃用 body，改用语义化局部容器，如
.figure__wrapper { counter-reset: figureCounter; } 必须写在该容器上，不能靠祖先继承


确保只用 ::before（双冒号），:before 在部分 Obsidian 主题中失效


实际项目里最容易被忽略的，是「计数器名不能跨容器复用」——同一页面多个 .figure__wrapper 没问题，但若在某个 aside 里也用了 counter-reset: figureCounter，就可能污染主图编号。命名最好带作用域前缀，比如 figureMain 和 figureSidebar。