meter 的 high 属性仅定义高值区间左端点，不触发警告；需配合 optimum 和合法数值约束才能实现视觉警告，否则颜色不会出现。
meter 的 high 属性本身不触发警告，也不定义“超标”，它只参与划分浏览器默认着色的区间边界——想靠它实现视觉警告，必须配合 optimum 和合法的数值约束，否则颜色根本不会出现。
high 不是警戒线，只是高值区间的左端点
很多人写 high="90" 是想表达“超过 90 就危险”，但实际：high 定义的是 (high, max] 这个开闭区间，value 必须严格大于 high 才算落入高值区间。value 等于 high 时，它属于中性区间（low ），不会变红或变橙。
-
high必须是数字，不能是"90%"或字符串 - 若
max="100"，则high必须小于 100；设成high="100"→ 整个高值区间失效 - 若同时设了
low，则high必须严格大于low；low="85"配high="85"→ 无高值色块 - 没设
optimum时，浏览器按默认中点计算“最佳”位置，high的语义权重会被弱化，颜色倾向不稳定
警告色真正由 optimum + 区间位置共同决定
Chrome、Safari 渲染 meter 时，并不固定“高值=红色”。颜色取决于 optimum 落在哪一段：
- 当
optimum ≤ low：高值区间(high, max]显示为红色（真正接近“警告”） - 当
optimum ∈ [low, high]：高值区间显示为黄色（中性偏警示） - 当
optimum ≥ high：高值区间反而显示为绿色（表示“越接近 high 越好”） - value="95" 在
min="0" max="100" low="30" high="90" optimum="20"下是红色；但换optimum="98"就变成绿色
修改 high 后颜色不更新？DOM 属性 vs HTML 属性搞混了
直接赋值 meter.high = 85 不会触发重绘，浏览器只响应 HTML 属性变更：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
meter.high = "85"或meter.setAttribute("HIGH", "85")（大小写敏感） - ✅ 正确：
meter.setAttribute("high", "85")，且需同步确保low和max仍满足min - 修改后建议加
meter.offsetWidth强制重排，避免样式延迟生效 - Firefox 默认几乎不渲染 low/high 分段色，仅画灰条；别只在 Chrome 测
真正要实现“超标警告”，得绕过 meter 原生限制
原生 meter 的着色逻辑不可控、不可预测，跨浏览器差异大，且无法用普通 CSS 定制。如果需要稳定、可维护的警告视觉：
- 放弃依赖
high自动着色，改用<div>+ ARIA + 自定义 CSS 进度条 - 用 JS 判断
value > high后手动加 class，比如class="warning"，再配background: #f44336 - 若坚持用
meter，务必在 iOS Safari、旧版 Firefox、Edge ≤18 上实测——high在这些环境可能完全静默
最易被忽略的一点：你看到的“红色警告”，大概率不是 high 单独起的作用，而是 optimum 恰好落在低侧，且 low/high/max 全部满足约束的结果。调一个值，往往要动三个。
