meter的红色仅由optimum位置决定：optimum在[min,low)时value>high变红，optimum在(high,max]时value≤low变红，optimum在[low,high]时无红色；跨平台需用div+js模拟。
low/high 本身不直接触发红色，optimum 才是关键
写 low="30" 或 high="90" 不会让 meter 变红；真正决定哪段变红的是 optimum 落在哪一区间，以及 value 相对于 low 和 high 的位置。红色只出现在“离 optimum 最远”的那个逻辑区间，不是“超标就红”。
- 如果
optimum∈ [min,low)，那么 (high,max] 区间会是红色（即 value > high 时） - 如果
optimum∈ (high,max]，那么 [min,low) 区间会是红色（即 value ≤ low 时） - 如果
optimum∈ [low,high]，则两端都是黄色，不会出现红色
必须满足 min
浏览器只在五个数值严格满足 min 时才启用三段语义渲染。任意一项不成立（比如 <code>low="0" 配 min="0"，或 high="100" 配 max="100"），整个 low/high 逻辑被静默忽略，meter 永远显示中性色（通常是浅灰或默认蓝）。
-
low必须严格大于min，不能相等 -
high必须严格小于max，且严格大于low - 只设
low不设high→ 无效；反之亦然 - 用 DevTools 检查
meter::-webkit-meter-optimum-value是否生效，能快速验证分段是否启动
Chrome for Android 是唯一能稳定触发红色的主流环境
iOS Safari 完全无视 low/high/optimum，Firefox for Android 不响应 high/low 着色，Samsung Internet 偶有重绘延迟。只有 Chrome for Android（Blink 内核）能按规范把 value > high 且 optimum 在左侧时稳定渲染为红色。
- 真机测试确认：
<meter value="95" min="0" max="100" low="30" high="90" optimum="20"></meter>在 Chrome for Android 中显示为红色 - 同一代码在 iOS Safari 中始终是浅蓝色，无任何分段变化
- Firefox for Android 渲染长度正确，但颜色永远是灰色填充+边框
- 想跨平台实现红色警告？放弃伪元素，改用
<div> + <code>data-status="high"+ JS 判断 + CSS 类控制背景色value="90" 不等于 "触发 high 警告"，注意开闭区间
high定义的是 (high, max] 这个开闭区间，value 必须严格大于high才算落入高值段。value === high 时，它属于 [low, high] 中性段，不会变红——哪怕你本意是“≥90 就危险”。-
high="90"时，value="90"→ 黄色（假设 optimum 在中间） -
value="90.1"→ 才可能进红色段（取决于 optimum 位置） - 不要依赖浮点精度判断边界，建议服务端或 JS 预处理 value，确保比较逻辑明确
- 若需“≥high 就红”，必须用 JS 计算后手动加 class，不能靠原生属性
meter的红色不是 UI 控制信号，而是语义距离反馈；真正难的不是写对属性，是接受「它只在特定引擎+特定数值约束下才按你预期变红」这个事实。 -
