meter 必须显式声明 min、max、value 才能正常渲染，缺一即空白或退化为文本；value 必须为数字，low/high/optimum 需满足数值约束且跨浏览器支持差。
meter 必须显式写全 min、max、value 才能渲染
漏掉任意一个属性，meter 很可能空白显示或退化为纯文本——不是样式问题，是语义缺失导致浏览器直接放弃渲染。Chrome 会按 min="0" max="1" 归一化，value="85" 就变成 8500%，溢出后截断；Firefox 更严格，缺 max 就不触发任何颜色逻辑。
常见错误包括：
-
value写成字符串，比如value="85%"或value="0.85"，会被忽略（必须是数字85或85.0） - 后端返回小数时没转换，比如 API 给
0.73，直接塞进value，应先做Math.round(val * 100) - 依赖默认值，如只写
<meter value="60"></meter>，等于说“60/1”，语义错乱
low 和 high 不是可选装饰，而是有硬性数值约束
low 和 high 只在满足 min 时才生效。写成 <code>low="0"（当 min="0"）或 high="100"（当 max="100"）会被浏览器静默忽略，颜色状态不触发。
典型误用场景：
- 想标出“20–80 是正常区间”，却设
low="20" high="80" min="0" max="100"→ 正确，但若后端数据突变为value="-5"，虽不报错，但语义上meter本意是标量测量（如温度可负），而低色区可能失效 - 把
low和high当 CSS 类开关，以为设了就自动变色 → 实际需配合浏览器伪元素（如meter::-webkit-meter-bar），且 Firefox 完全不支持 - 写
low="80" high="30"，部分引擎仍解析但语义颠倒，屏幕阅读器读作“高范围从 80 开始”，逻辑混乱
optimum 值决定“理想”倾向，但必须落在 [min, max] 内
optimum 不是视觉锚点，而是语义信号：它告诉辅助技术“这个值越接近越优”。如果 optimum 超出 [min, max]，整个最优判断逻辑被丢弃，Chrome 也不会亮绿色。
使用要点：
- 电池健康度：设
min="0" max="100" optimum="100"（越高越好） - 服务器负载率：设
min="0" max="100" optimum="0"（越低越好） - 若
optimum="50"但low="10" high="90"，绿色只集中在中间窄带；若想扩大“理想区”，应调宽low/high，而非改optimum - 不要设
optimum="120"试图“拉伸”绿色区域——超出范围即失效
跨浏览器一致性差，别指望纯 CSS 控制颜色
Chrome/Safari 支持 meter::-webkit-meter-bar 等伪元素，Firefox 目前完全忽略 low/high/optimum，也不响应伪类。你写的 meter { background: green; } 无效，因为原生样式由 UA stylesheet 内部控制。
可行路径只有两条：
- 接受降级：只用
min/max/value，放弃low/high，确保基础条形图在所有浏览器可见 - 主动降级：用
<div role="meter"> + ARIA 属性（<code>aria-valuenow、aria-valuemin、aria-valuemax），再配 JS 动态加 class 控制颜色，兼顾语义与视觉真正容易被忽略的，是那个判断前提：你手上的数值，到底是「完成了多少」，还是「处在什么水平」。选错标签，后面所有样式、JS 更新、无障碍适配，全得重来。
