meter标签渲染为空白或颜色异常，主因是min、max、value三者未显式写全或数值非法：缺属性时浏览器按默认值归一化导致value越界被丢弃；value为字符串（如"85%"）被忽略；low必须大于min、high必须小于max，否则low/high语义失效。
meter 标签必须显式写全 min、max、value 三者，缺一就可能渲染为空白或退化为普通内联元素；low/high/optimum 只在数值合法且浏览器支持时才触发颜色语义，不是装饰开关。
为什么渲染为空白或颜色不对
常见现象是页面里什么都没显示，或者始终绿色、始终灰色——大概率不是 CSS 没写对，而是属性配置出错。
-
min或max缺失：浏览器按默认min="0"max="1"解析，value="85"就变成“85 × 1 = 85”，远超范围被静默丢弃 -
value是字符串：value="85%"或value="0.85"会被忽略，必须是纯数字85或85.0 -
low/high超出范围：low="0"在min="0"下无效（要求low > min）；high="100"在max="100"下不触发“高”状态（要求high ） -
optimum超出[min, max]：比如min="0" max="100" optimum="120"，整个语义判断直接失效
Chrome/Safari 和 Firefox 的视觉表现差异极大
别指望一套 CSS 覆盖所有浏览器。原生 meter 的 Shadow DOM 结构完全不同，伪元素不互通。
- WebKit（Chrome/Safari）用：
meter::-webkit-meter-bar、meter::-webkit-meter-optimum-value等 - Firefox 仅支持：
meter::-moz-meter-bar、meter::-moz-meter-optimum，且完全忽略low/high/optimum的颜色逻辑 - 没有统一的
::-meter-value这类标准伪类，也不能用普通 class 控制填充色 - 若需深色模式适配或高对比度支持，必须手动覆盖伪元素的
background和border-radius
动态更新 value 时容易忽略的关键点
JS 修改 textContent 或 innerHTML 不会触发重绘，浏览器只响应 value 属性变更。
- 必须调用
element.setAttribute('value', newValue)或直接赋值element.value = newValue - 若 value 来自后端小数（如
0.72），先做转换：Math.round(parseFloat(apiValue) * 100)，再确保在[min, max]内 - 无障碍需同步更新：
element.setAttribute('aria-valuenow', newValue)，否则屏幕阅读器感知不到变化 - 避免高频更新（如每 50ms 改一次），Chrome 下易卡顿或闪烁，建议加节流
真正难的不是写对属性，而是接受它天生就不一致——Firefox 不响应 low/high，Safari 对 optimum 的着色策略和 Chrome 不同，而所有浏览器都拒绝让你用一个 class 控制颜色。如果项目需要跨浏览器视觉统一，<div role="meter"> + ARIA + JS class 切换仍是更可控的选择。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
