根本原因是min或max缺失导致value被忽略；必须显式设置min和max为数字，value需为纯数字；low/high/optimum需满足严格大小关系才生效。
为什么写了 value 却没显示进度条
根本原因不是样式没加，而是 min 或 max 缺失。浏览器不会自动补全范围来渲染视觉条——<meter value="75"></meter> 在 Chrome 里可能 fallback 成 min="0" max="1"，结果 75 被当成远超上限的非法值静默丢弃；Firefox 则直接不渲染条形，getBoundingClientRect().height 返回 0。
-
min和max必须显式写出数字，哪怕和默认值一样（如min="0" max="100"） -
value必须是纯数字：value="75%"、value="0.75"全部被忽略，得转成75或75.0 - 后端返回小数（如
0.72）时，JS 中建议统一处理：Math.round(parseFloat(apiValue) * 100)，再用Math.min(Math.max(newValue, min), max)做边界 clamp
low/high/optimum 怎么设才生效
这三个属性不是开关，而是语义信号，只有在数值关系合法且浏览器支持时才参与状态判断。一旦写错大小关系，整个颜色逻辑就失效。
-
low必须严格大于min（low="0"在min="0"下无效） -
high必须严格小于max（high="100"在max="100"下不触发“高”状态） low 是推荐写法；若写反（如 <code>low="80" high="30"），部分浏览器仍解析但语义混乱-
optimum必须落在[min, max]内，可以等于边界（如噪音分贝越低越好，就设optimum="min"）
Chrome、Firefox、Safari 对 meter 的支持差异
别指望一套 HTML + CSS 能跨浏览器一致渲染。各引擎对 low/high/optimum 的响应程度天差地别，伪元素结构也完全不同。
- Chrome/Safari（WebKit）：支持
::-webkit-meter-bar、::-webkit-meter-optimum-value等伪类，会根据value相对位置切换背景色 - Firefox：仅支持
::-moz-meter-bar，完全忽略low/high/optimum的视觉反馈，所有值都显示同一色块 - Safari 对
optimum的着色策略和 Chrome 不同（例如value=85在 Chrome 显黄，在 Safari 可能偏橙） - 没有统一的
::-meter-value标准伪类，也不能用普通class控制填充色
动态更新 value 时容易踩的坑
只改 textContent 或 innerHTML 不会触发重绘，浏览器只响应 value 属性变更。同时，无障碍信息不同步会导致读屏工具失效。
立即学习“前端免费学习笔记（深入）”；
- 必须调用
element.setAttribute('value', newValue)或直接赋值element.value = newValue - 同步更新
aria-valuenow：element.setAttribute('aria-valuenow', newValue) - 避免高频更新（如每 50ms 改一次），Chrome 下易卡顿或闪烁，建议加节流
- 不要把关键状态提示（如“电量不足”）只放在
meter内容文本里——它只在 CSS 关闭或浏览器不支持时才显示
真正难的不是写对属性，而是接受它本质上是个「语义容器」：视觉表现不可控，语义传达不完整，跨浏览器一致性几乎不存在。如果你需要精确控制颜色、动画或无障碍体验，meter 不是起点，而是最后才考虑的轻量补充方案。
