meter颜色由min、max、low、high、optimum共同决定三段逻辑区间，optimum所在段为绿色，相邻段黄色，最远段红色；需满足min < low < high < max才启用分段渲染，否则退化为中性色。
meter的low/high/optimum怎么决定颜色区间
浏览器不是靠CSS类切换颜色，而是用min、max、low、high、optimum这五个属性共同算出三个逻辑区间，再根据value落在哪一段、以及optimum在哪一段，来决定渲染绿色/黄色/红色。
关键点是：low和high只是两个分割点，不是独立阈值；optimum才是颜色语义的“锚点”——它在哪段，哪段就是绿色；相邻段黄色；最远段红色。
-
optimum在[min, low)区间 →[min, low]绿，(low, high]黄，(high, max]红 -
optimum在[low, high]区间 →[low, high]绿，[min, low)和(high, max]都黄 -
optimum在(high, max]区间 →[high, max]绿，[low, high)黄，[min, low)红
注意闭开区间细节：比如low="30"，那value="30"就属于绿色段（如果optimum ≤ 30），不是“刚过线才变色”。
为什么写了low="40"但meter还是灰色或绿色
常见原因是low和high没成对出现，或者min/max缺失或错位。浏览器只在min ≤ low ≤ high ≤ max完整成立时才启用分段逻辑，否则静默忽略low/high，所有value都按“中性”渲染（通常是浅灰或默认绿）。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 只写
low="40"不设high→ 无效 - 写了
low="40" high="30"（顺序反了）→ 无效 -
min="0" max="100" low="120"（low超出max）→ 无效 -
value="50"但low="30" high="45"→ 它落在(45, 100]，若optimum在左边，这段就是红色，不是“没反应”，是反应对了但你没预料到
用DevTools检查computed样式，看meter::-webkit-meter-optimum-value是否被应用，能快速判断分段逻辑是否生效。
Chrome/Firefox/Safari颜色表现不一致怎么办
原生<meter>的颜色策略由各浏览器UA样式控制，Firefox目前完全不支持low/high/optimum的视觉反馈，Safari对optimum区间判断偶有偏差，Chrome最稳定但默认色系也和其他不同（比如高值在Chrome是橙黄，在Safari偏红）。
- 不要依赖默认颜色跨浏览器统一；纯HTML方案仅适合Chrome为主场景
- 需要一致外观时，必须重置
appearance，用linear-gradient配合background-size手动模拟三段色（只对WebKit内核有效） - 对Firefox和旧Edge，得降级：加
data-status="low"等属性，用CSS类控制背景色，例如meter[data-status="critical"] { background: #f44336; } - 无障碍不能丢：无论怎么定制，都要保留
aria-label和可见文本，比如<meter value="18" aria-label="电池电量：18%，低于安全阈值">18%</meter>
value是字符串或小数时怎么避免渲染失败
value属性只接受数字类型，传"85%"、"0.85"或null会导致浏览器忽略该值，回退到0或默认，meter显示空或错误位置。
- JS赋值时统一用
+value或parseFloat(value)，别用parseInt("85%")——它会返回85但掩盖单位污染风险 - 后端返回小数（如
0.72）要乘以100并确保在min/max范围内：Math.min(100, Math.max(0, Math.round(parseFloat(val) * 100))) - 服务端模板里也要做清洗，比如Nunjucks中写
<meter value="{{ battery | float * 100 | int }}"></meter> - 动态更新时，必须用
setAttribute("value", newValue)，直接改meter.value = 72不会触发重绘（同理low/high也要用setAttribute）
最易被忽略的是：value超出[min, max]范围时，浏览器会强制用“异常色”（深红），此时low/high完全不参与判断——所以校验输入边界比调样式更优先。
