high是高值区间的左边界而非警戒线，定义(high, max]区间；需满足highlow且为数字，否则颜色逻辑失效，浏览器兼容性差且着色不一致。
high属性不是“警戒线”，而是高值区间的左边界
它不触发任何事件或逻辑判断，只参与浏览器对high和low把整个范围[min, max]切成三段：[min, low)、[low, high]、(high, max]。其中(high, max]就是“高值区间”——注意是开闭区间，high本身不属于高值区间，而是它的下限分界点。
常见错误是设high="100"却忘了max必须更大，比如max="100"时high必须小于100；否则整个高值区间失效，浏览器直接忽略high和low，退化为纯灰条。
-
high必须是数字，不能是字符串如"80%" - 若同时设了
low，则high必须严格大于low，low="70"配high="70"无效 - 没设
optimum时，浏览器按默认中点计算颜色倾向，high的语义权重会弱化
high和optimum一起才决定颜色怎么变
单独设high不会让条变红或变绿——颜色由value落在哪个区间，以及optimum落在哪个区间共同决定。比如optimum="100"且high="80"，那么value="85"落在(high, max]区间，又和optimum同属该区间，就大概率显示绿色（表示“接近最佳”）；但若optimum="30"，同一value="85"就可能被渲染为红色（远离最佳）。
这意味着：调色不能只调high，得同步看optimum位置。调试时建议固定min、max、value，只动optimum观察颜色跳变点。
-
optimum在[low, high]区间内 → 中间段绿色，两边渐变为黄→红 -
optimum≤low→[min, low]绿色，(low, high]黄色，(high, max]红色 -
optimum≥high→[min, low]红色，(low, high]黄色，[high, max]绿色
浏览器兼容性差，high颜色常不显示
Chrome 和 Safari（WebKit）对high/low颜色支持较好，Firefox 默认几乎不着色，仅靠value比例画灰条；Edge 已随 Chromium 内核统一，但旧版本仍可能 fallback。
更麻烦的是，即使渲染了颜色，各浏览器用的色值也不一致：Chrome 可能用#ff6b6b 表示高值区，Firefox 却用#ff9e6d，且无标准 API 暴露当前渲染色。所以别指望靠high实现精确 UI 控制。
- 必须显式声明
min和max，否则 Chrome 会 fallback 到min="0" max="1"，导致value="85"溢出不渲染 - CSS 伪元素如
::-webkit-meter-bar可覆盖样式，但 Firefox 不支持，需用@supports selector(::-moz-meter-bar)做隔离 - 若需强一致性，不如放弃
high，改用<progress></progress>+ CSS class 切换
high设错的典型报错和静默失效
浏览器不会报错，但high设错会导致整个语义颜色系统退化——你看到的只是个没颜色的灰条，或者颜色完全不符合预期。最常踩的坑是数值约束不满足：
-
high="120"但max="100"→ 忽略high，无高值区间 -
high="0"但min="10"→high小于min，同样被忽略 -
low="50"且high="40"→ 违反high > low，整套low/high逻辑失效 - 漏写
value属性 →<meter></meter>不渲染任何填充，只留空框
这些情况都不会抛异常，DOM里属性存在，但 computed style 里看不到对应颜色层。调试时建议先用getComputedStyle查background，再回溯属性值是否合规。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
