<meter> 标签在 IE 和旧 Edge 中被完全忽略，仅显示内部文本；必须结构降级为 <div role="meter"> 并手动添加 aria-valuenow/min/max 属性，数值须为纯数字且严格校验边界。
meter 标签在 IE 和旧 Edge 中根本不会渲染
它不是“样式不一致”，而是直接被忽略——<meter value="75" min="0" max="100">75%</meter> 在 IE11 或 Edge 18 及更早版本里，只显示内部文本 75%，进度条完全消失，getBoundingClientRect().height 返回 0。这不是 CSS 能修的，是浏览器根本不认识这个标签。
必须做结构降级：用 <div role="meter"> 替代，并手动补全 ARIA 属性：
-
role="meter"告诉读屏软件这是度量器 -
aria-valuenow="75"对应value -
aria-valuemin="0"和aria-valuemax="100"对应min/max - 内部文本（如
75%）必须和aria-valuenow一致，否则读屏会报矛盾值
min/max/value 必须是纯数字，字符串会静默失效
写成 value="75%"、min="0px"、max="100.0" 看似合理，但 Firefox 会直接跳过渲染，Chrome 可能 fallback 成 min="0" max="1" 导致 value="75" 被当成超限值丢弃。
后端返回小数（如 0.72）时，JS 处理必须严格：
立即学习“前端免费学习笔记（深入）”；
- 先转为数字：
Number(apiValue)或parseFloat(apiValue) - 再缩放到整数范围（如百分比）：
Math.round(val * 100) - 最后做边界 clamp：
Math.min(Math.max(clamped, min), max) - 避免科学计数法：
value="1e2"不被识别，得转成100
low/high/optimum 的语义在旧浏览器里毫无意义
这些属性只在 Chrome/Safari 里可能触发伪元素状态（如 ::-webkit-meter-suboptimum-value），Firefox 完全无视 low/high/optimum 的视觉反馈，IE 更是连解析都不做。而且它们生效有硬性数值约束：
-
low必须严格大于min（low="0"在min="0"下无效） -
high必须严格小于max（high="100"在max="100"下不触发“高”状态） -
low < high必须成立，写反（如low="80" high="30"）会导致语义混乱 -
optimum可以等于min或max，但不能超出区间
别指望靠它们控制业务关键色——屏幕阅读器基本不读 low/high 含义，只报 "meter 75"。
动态更新 value 时，只改 innerHTML 不会重绘
写 meterEl.innerHTML = "80%"; 或 meterEl.textContent = "80%"; 完全无效。浏览器只响应 value 属性变更：
- 正确方式：
meterEl.setAttribute('value', '80')或meterEl.value = 80 - 同步更新可访问性：
meterEl.setAttribute('aria-valuenow', '80')（对降级div同样适用） - 高频更新（如每 50ms）易卡顿，建议加节流；不要把“电量不足”这类关键提示只放在 meter 内部文本里
真正难的不是写对属性，而是意识到：<meter> 是语义容器，不是 UI 组件。它的渲染权交给了浏览器 UA 样式表，而这块表在 IE 和旧 Edge 里压根不存在。
