meter标签必须同时显式设置min、max、value三属性且均为数字，缺一不可；否则浏览器不渲染或退化为纯文本，low/high/optimum仅在满足min<low<high<max时部分浏览器才触发颜色语义，跨浏览器一致性差，需JS+CSS或ARIA降级兜底。
meter 标签能显示数值在已知范围内的占比，但必须同时写全 min、max 和 value，缺一不可；否则多数浏览器不渲染或退化为纯文本。
为什么写了 value 却没显示进度条
常见错误是只写 value，漏掉 min 或 max。浏览器不会自动补默认值来渲染视觉条——Chrome 可能 fallback 成 min="0" max="1"，Firefox 则直接不触发样式逻辑，getBoundingClientRect() 返回高度为 0。
-
min和max必须显式声明为数字，min="0"可以，min="zero"或min="0px"无效 -
value必须是数字，value="75%"、value="0.75"都会被忽略，得转成75或75.0 - 后端返回小数（如
0.72）时，JS 中建议统一处理：Math.round(parseFloat(value) * 100)，再 clamp 到[min, max]范围内
low / high / optimum 怎么影响颜色却看不出效果
这三个属性只有在 min 和 max 显式存在、且满足 min < low < high < max 时才参与语义判断；但浏览器实现差异极大：
- Chrome：根据
value相对位置切换背景色（绿色→黄色→红色），optimum在两端也生效 - Firefox：目前完全不支持
low/high/optimum的视觉反馈，所有值都显示同一色块 - Safari：支持但阈值判定逻辑与 Chrome 不同，比如
value=85在 Chrome 显黄，在 Safari 可能偏橙 -
optimum不是“中间值”，而是业务定义的理想点，可以等于min（如电池健康度越低越好）
怎么让 meter 在旧浏览器或屏幕阅读器里可用
meter 在 IE 和 Edge 18 及更早版本中完全不渲染，只显示内部文本；NVDA、VoiceOver 等读屏工具基本不读 low/high 含义，仅报“meter 75”。
- 必须提供可访问 fallback：用
aria-label或隐藏<span class="sr-only">电量偏低，剩余 15%</span> - 兼容性兜底不能只靠 CSS，得用结构降级：例如改用
<div role="meter" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" data-status="critical"></div>+ 对应 class 控制样式 - 不要把关键状态提示（如“电量不足”）只放在
meter内容文本里，它只在 CSS 关闭或浏览器不支持时才显示
真正难的不是写对属性，而是接受它本质上是个「语义容器」——视觉表现不可控，语义传达不完整，跨浏览器一致性几乎不存在。如果你需要精确控制颜色、动画或无障碍体验，meter 不是起点，而是最后才考虑的轻量补充方案。
