high是高值区间的下限分界点,用于划分meter元素中从high到max的高值区域颜色,需满足大于min、小于max且大于low(若设置)三个数值约束,其视觉表现还受optimum影响。

high 属性定义“高值区间”的下限
high 不是“高值的上限”,也不是“高值本身”,而是告诉浏览器:从这个数开始往右(直到 max),就属于“高值区间”。它本质上是一个分界点,和 low 对称——low 是低值区间的上限,high 是高值区间的下限。
常见误解是把它当成“警戒线”或“超标值”,但实际渲染中,浏览器只用它划分颜色区域(比如红色段从 high 延伸到 max),不触发任何逻辑判断或事件。
high 必须满足的三个数值约束
如果 high 的值不合法,浏览器会忽略该属性,退回到仅用 min/max/value 渲染的默认状态(即无高低色块)。
-
high必须是数字,且大于min -
high必须小于max -
high必须大于low(如果low已设置)
例如:<meter value="7" min="0" max="10" low="2" high="8"></meter> 合法;但 high="12" 或 high="1" 会导致高值区间失效。
high 和 optimum 共同影响颜色表现
浏览器对 <meter></meter> 的着色逻辑不是固定 RGB,而是基于相对位置 + optimum 偏移。当 optimum 在 high 右侧时,高值区间可能显示为橙色而非红色;若 optimum 靠近 min,同一 high 值可能让“高值区间”视觉上更窄。
这意味着:high 的数值意义依赖上下文。调试时不要只看数字,要配合 optimum 和实际渲染效果一起验证。
Chrome/Firefox/Safari 对 high 的支持现状
所有主流桌面浏览器(Chrome ≥ 6、Firefox ≥ 16、Safari ≥ 6)都支持 high,但存在两个易忽略的兼容细节:
- 旧版 Edge(≤18)完全不识别
high,会静默降级为无色块 meter - 移动端 Safari 在 iOS 15.4 之前对
high+optimum组合的着色有轻微偏差,建议在真实设备上预览
不需要 polyfill,但上线前务必在目标用户常用设备上实测渲染结果——high 的作用最终是给人看的,不是给 JS 读的。










