meter 的 value 和 optimum 不直接控制颜色，而是参与浏览器内部状态判断；浏览器仅用 min、max、low、high、optimum 与 value 做区间比对来启用“低/中/高”状态样式，且各浏览器实现差异大，无统一配色标准。
meter 的 value 和 optimum 不直接控制颜色，而是参与浏览器内部状态判断
浏览器不会因为你设了 optimum="80" 就自动把 80 附近染成绿色——它只用这个值和 low、high、value 一起做区间比对，再决定是否启用内置的“低/中/高”状态样式。这些状态本身没有标准色值，Chrome、Firefox、Safari 实现完全不同。
常见错误现象：写了 optimum="100" 但 value=95 还是灰色；或者 value="20" low="30" 却没变红——大概率是 low 没落在 [min, max] 内，或 low >= high，导致整个语义判断被忽略。
-
min、max、low、high、optimum全部必须显式声明，且满足min ，否则 Chrome/Firefox 都会退化为无颜色反馈 -
optimum可以等于min或max（比如电池健康度越低越好），此时“最优”在边界，但value靠近它才会触发绿色，不是只要相等就生效 - Firefox 目前完全不响应
low/high/optimum的视觉变化，所有meter都显示统一灰条；Safari 对阈值判定更宽松，但也不保证和 Chrome 一致
Chrome 下 color 映射实际怎么算
Chrome 把 meter 的背景色逻辑固化为三段式：红色（value ）、黄色（<code>low ）、绿色（<code>value > high），optimum 只影响填充色的“倾向”，不改变分段边界。
例如：<meter value="25" min="0" max="100" low="30" high="70" optimum="90">25</meter>，value=25 小于 low=30，Chrome 渲染为红色背景；即使 optimum="90"，也不会让 25 变绿——它只在 value > high 时才可能强化绿色饱和度。
- 如果
optimum在 [low, high] 内（如optimum="50"），value 落在该区间时填充色偏绿；超出则偏黄/红 - 如果
optimum （如节能模式温度 optimum="18"，low="22"），表示“越低越好”，此时 value=16 会比 value=25 更容易触发绿色 - 如果
optimum > high（如电量 optimum="100"），value=98 会比 value=85 更接近绿色表现
想稳定变色？别依赖属性，改 CSS 伪元素
low、high、optimum 本身不生成 class，也不写内联 style，它们只是信号。真正能控制颜色的是浏览器私有伪元素，而且只在 WebKit/Blink 引擎下有效（即 Chrome/Safari/Edge）。
Firefox 完全不支持这些伪元素，所以纯靠属性 + 伪元素无法跨浏览器一致变色。必须搭配 JS 判断 zone 后手动加 class，或 fallback 到 progress + 自定义样式。
- WebKit 下可用：
meter::-webkit-meter-bar（空槽）、meter::-webkit-meter-optimum-value（最优区填充）、meter::-webkit-meter-suboptimum-value（次优区填充） - 注意：这些伪元素不能用
!important覆盖某些 UA 样式，比如 Chrome 会强制给::-webkit-meter-optimum-value加 background-color，你得用更具体的选择器或 inline style - 安全写法是用 JS 计算当前
value所属 zone（low/mid/high），然后动态设置className，再用普通 CSS 控制颜色
value 超出 min/max 会怎样
value 必须在 [min, max] 闭区间内，否则行为不可控：Chrome 会 clamp 到边界并继续渲染，Firefox 可能直接不显示填充，Safari 有时渲染为 0% 宽度条。
比如 <meter value="120" min="0" max="100"></meter>，Chrome 当作 value=100 处理，但如果你同时设了 optimum="120"，这个值会被忽略（因为超出 max），导致颜色判断失效。
- 服务端或 JS 更新
value前务必校验：Math.min(max, Math.max(min, newValue)) - 不要指望浏览器帮你做容错；
value越界不会报错，但颜色逻辑大概率崩坏 - 调试时打开开发者工具，检查 computed style 中是否还有
-webkit-appearance: meter，没了说明 UA 已降级处理
meter 改用 div + aria-valuenow。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
