<meter>必须显式声明min、max、value三者，且low/high/optimum需满足数值约束（low>min、high<max、optimum∈[min,max]），否则语义失效；Chrome/Safari支持颜色状态，Firefox忽略low/high/optimum，跨浏览器一致性需JS+CSS降级或ARIA替代。
min/max/value 必须三者显式写全，不能靠默认值
浏览器对 min、max、value 的 fallback 行为不一致：Chrome 可能按 min="0" max="1" 归一化，Firefox 则直接跳过颜色逻辑甚至不渲染。实际项目中漏掉任意一个，<meter> 就等于没生效。
常见错误现象：
-
<meter value="85">85%</meter>→ 渲染为空白或纯文本 -
<meter min="0" value="85"></meter>→ 缺max，Chrome 显示为 85/1，Firefox 不触发 low/high 样式
正确做法：
- 统一用数字类型，避免字符串如
"85%"或"0.85" - 后端返回小数时，JS 中先做转换：
Math.round(parseFloat(apiValue) * 100) - 显式写出全部三个属性，哪怕和默认值一样：
min="0" max="100" value="85"
low/high/optimum 的数值关系必须合法才起作用
这三个属性不是装饰开关，它们只有在 min 和 max 存在且满足大小约束时，才会参与浏览器的语义状态判断（比如 Chrome 中显示红/黄/绿）。一旦关系错乱，整个颜色逻辑就失效。
立即学习“前端免费学习笔记（深入）”；
关键约束条件：
-
low必须大于min，否则被忽略（low="0"在min="0"下无效） -
high必须小于max（high="100"在max="100"下不触发“过高”状态） -
low < high是推荐写法；若写成low="80" high="30"，部分浏览器仍解析但语义混乱 -
optimum必须落在[min, max]内，可以等于边界值（如电池健康度最优值是min="0"）
示例：<meter min="0" max="100" low="20" high="80" optimum="60" value="15">偏低</meter> —— 因为 15 < low，浏览器可能渲染为红色背景（取决于引擎实现）。
不同浏览器对 low/high/optimum 的支持程度差异很大
Chrome 和 Safari 基于 WebKit，会响应 low/high/optimum 并通过伪元素（如 ::-webkit-meter-optimum-value）暴露样式钩子；Firefox 目前完全忽略这三个属性，只渲染基础刻度条。
这意味着：
- 仅靠 HTML 属性无法保证跨浏览器颜色一致
- 想让 Firefox 也显示语义色，必须配合 CSS 伪类 + JS 检测浏览器并手动添加 class
- 若项目需强一致性（如企业监控面板），更稳妥的做法是用
<div role="meter">+aria-valuenow+ 自定义背景渐变
典型降级写法：<meter min="0" max="100" value="72" aria-label="CPU 使用率 72%">72%</meter> —— 至少保留可访问性文本回退。
别把 meter 当 progress 用，语义错位会导致可访问性问题
<meter> 表达的是「静态标量在已知范围中的位置」，比如磁盘使用率、体温读数、投票占比；而 <progress> 表示「动态任务的完成进度」，value 可以是不确定的（max 缺失）。
误用后果：
- 屏幕阅读器会把
<meter value="60">读作“60 在 0 到 100 之间”，把<progress value="60">读作“已完成 60%”——语义完全不同 - 搜索引擎可能因语义混淆降低页面数据可信度
- 当数值范围本身动态变化（如 API 返回的总票数每次不同），硬套
<meter>会导致频繁重写min/max，不如用 ARIA 模拟
真正要注意的是：它的视觉反馈高度依赖浏览器原生实现，CSS 自定义能力极弱；appearance: none 后各引擎表现分裂严重。如果你需要精确控制颜色过渡、动画或响应式缩放，<meter> 不是第一选择。
