怎样解决CSS counter计数器在老旧移动端的兼容问题-css教程-PHP中文网

老旧移动端（ios 12以下、android 4.4 webview）完全不支持counter-reset/counters()，连content: counter()都留空；@supports无效，唯一可靠方案是data-*属性+轻量js配合attr()渲染。

怎样解决css counter计数器在老旧移动端的兼容问题

老旧移动端（iOS 12 以下、Android 4.4 WebView）根本不解析 counter-reset 和 counter-increment，不是样式错位，是整个规则被忽略——连伪元素里的 content: counter(item) 都不会计算，直接留空。

为什么 counter() 在 iOS 11 或 UC 浏览器里完全不显示

这些内核的 CSS 解析器遇到 counter()、counters() 函数时，会当作无效值跳过整条 content 声明。不像 CSS 变量还能 fallback，计数器函数没有降级机制，浏览器不支持就是不支持。

不是选择器没匹配，也不是 display 属性问题，是语法层面未实现
@supports (counter-reset: foo) 无效——该语法不被任何旧版移动端识别，@supports 块本身会被整个丢弃
即使加了 -webkit- 前缀也无用，这不是渲染属性，是 CSS Generated Content 模块的一部分，旧 WebKit 根本没接入

替代方案：用 data-* 属性 + 简单 JS 维护编号

放弃纯 CSS 计数，改用语义化标记 + 最小 JS 补充，兼容性拉满且可控。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给每个需要编号的元素加 data-counter，初始值可由服务端或构建时写死：<li data-counter="1">

用轻量脚本遍历并递增：

document.querySelectorAll('ol[data-auto-counter] li').forEach((el, i) => {
  el.setAttribute('data-counter', i + 1);
});

CSS 只负责渲染：li::before { content: attr(data-counter) "."; } —— attr() 在 iOS 6+ 全支持，无风险
如需嵌套编号（如 1.2.3），用多级 data-section/data-subsection，JS 拼接后写入单一 data-counter

如果必须保留纯 CSS，只在现代环境启用

用 @supports 包裹计数器规则，但必须配无条件 fallback，且 fallback 不依赖计数逻辑。

错误写法：@supports (counter-reset: x) { ol { counter-reset: item; } } → 旧系统跳过整块，编号消失

正确结构：

li::before { content: "• "; } /* 保底符号 */
@supports (counter-reset: item) {
  ol { counter-reset: item; }
  li { counter-increment: item; }
  li::before { content: counter(item) ". "; }
}