<meter> 标签不支持 IE 及 Edge 18 以下版本，仅建议用于可控浏览器环境的内部工具；需用 div+ARIA+CSS 兜底兼容性，并确保 value/min/max 为纯数字以避免渲染失效。
meter 标签不支持 IE，连 Edge 旧版都不行
<meter> 是语义化标签，用来表示已知范围内的标量值（比如磁盘使用率、投票占比），但它在实际项目里落地困难——ie 完全不支持，edge 18 及更早版本也忽略渲染，只当普通 inline 元素处理。这意味着如果你的用户里还有企业内网用户（尤其金融、政务系统），<meter> 很可能直接“消失”或显示为纯文本。
常见错误现象：<meter value="70" min="0" max="100">70%</meter> 在 IE 中不渲染进度条，只显示“70%”两个字；Chrome/Firefox 正常显示带颜色的横条。
- 使用场景：仅建议用于内部工具、后台管理页等可明确控制浏览器环境的场合
- 兼容性兜底必须做：用
div+ CSS 模拟样式，并通过aria-valuenow等属性维持可访问性 - 不要依赖
<meter>的默认样式做关键交互，它的外观由 UA 样式表决定，各浏览器差异大（比如 Chrome 用绿色渐变，Firefox 用蓝色）
value/min/max 必须是数字，字符串会失效
<meter> 对属性类型敏感。value、min、max 必须是有效数字，写成字符串（如 value="70"）在多数浏览器下虽能 fallback 解析，但一旦含空格、单位或非数字字符（如 value="70%"），整个标签就会退化为无意义容器，进度条不渲染，getBoundingClientRect() 返回 0 高度。
实操建议：
- 服务端或 JS 动态插入时，确保传入的是纯数字：用
Number(value)或parseFloat(value)转换 - 避免模板中拼接：❌
<meter value="{{item.percent}}%"></meter>→ ✅<meter value="{{item.percent}}"></meter> - 注意小数精度：
value="0.3333333333333333"没问题，但value="1e2"不被识别，需转成100
低值/高值状态靠 CSS 伪元素控制，不是 HTML 属性
<meter> 的“低”“高”“最优”状态不是靠 low、high、optimum 属性触发视觉变化，而是浏览器根据这些值计算后，给内部伪元素（如 ::-webkit-meter-bar）添加对应类名或状态，再由 UA 样式表上色。你无法用 class 直接控制，也不能用 JS 监听“状态切换事件”。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
容易踩的坑：
-
low和high必须在min/max范围内，否则无效；optimum值超出范围时，浏览器会静默忽略 - CSS 自定义样式极难跨浏览器：Chrome 用
::-webkit-meter-bar，Firefox 用::-moz-meter-bar，Safari 还有细微差异，且伪元素层级不可穿透 - 不要试图用
getComputedStyle(el).getPropertyValue('background')检测颜色——返回空，因为颜色在伪元素上
替代方案比硬扛 meter 更靠谱
真正在意兼容性、可维护性和设计一致性时，<meter> 的收益远低于成本。一个带语义的 div + ARIA 属性 + 简单 CSS 就能覆盖 99% 场景，还能自由控制动画、响应式和主题色。
最小可行替代示例：
<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="meter"> <div class="meter-fill" style="width: 70%;"></div> </div>
这样写的好处：
- IE9+ 全支持，无障碍 API 行为与原生
<meter>一致 - 样式完全可控：
.meter-fill可加 transition、阴影、渐变 - JS 更新只需改
style.width和aria-valuenow，逻辑清晰
真正复杂的地方不在怎么画一根进度条，而在于要不要让屏幕阅读器把“70%”读成“磁盘已用百分之七十”，以及当值动态变化时，是否触发平滑过渡而非突兀跳变——这些细节，<meter> 既不保证，也不暴露接口给你调。
