可以，但必须满足前提：投票结果是已统计完成的静态比例，而非“正在计票中”；需配合label或aria-label明确语义，且low/high/optimum须业务对齐并兼顾兼容性。
meter 标签该不该用来展示投票结果
可以，但必须满足一个前提：投票结果是已统计完成的静态比例，不是“正在计票中”。<meter> 表达的是「当前值在固定区间中的位置」，语义上等同于“赞成票占总票数的 62%”，而非“还剩 38% 没点完”。
常见错误现象：<meter value="62" min="0" max="100">62%</meter> 单独放在页面上，没有上下文说明，屏幕阅读器可能读作“62%”，但无法判断这是结果还是进度——这时必须加 aria-label 或用 <label> 显式关联。
- ✅ 正确写法：
<label for="vote-approve">赞成票占比</label><meter id="vote-approve" value="62" min="0" max="100" low="40" high="80" optimum="90">62%</meter> - ⚠️ low/high 不是装饰：设
low="40"表示低于 40% 属于“偏低”，浏览器（Chrome/Firefox）会自动渲染为偏红；optimum="90"让 62% 被识别为“尚可但未达理想”，影响颜色逻辑 - ❌ 避免嵌套动态内容：不要把
<meter>放在 JS 每秒轮询更新的容器里——它不触发重绘动画，视觉卡顿且语义混乱
磁盘容量显示为什么推荐用 meter 而不是 progress
因为磁盘使用率是静态度量值：总量固定、当前占用确定、无“推进过程”。<progress> 暗示任务正在进行（如“清理中… 还剩 2.1GB”），而 <meter> 明确告诉辅助技术：“当前已用 78GB / 1TB”，属于状态快照。
实际项目中，直接写 <meter value="78" min="0" max="100">78%</meter> 是常见做法，但容易忽略两件事：
- max 应该反映真实单位：若后端返回的是字节数（如
used=838860800,total=1073741824），应计算为value="78"并保留整数，避免浮点误差影响颜色判断 - optimum 值要业务对齐：比如企业 NAS 管理系统定义“≤70% 为健康”，那就设
optimum="0"（越低越好）或optimum="70"（70% 是平衡点），否则浏览器默认居中着色会误导运维人员 - IE/Edge 18 及更早版本完全不渲染
<meter>，只显示内部文本“78%”——如果你的用户含政务或金融内网环境，必须降级为role="meter"+aria-valuenow的 div 方案
low/high/optimum 属性到底影响什么
它们不改变数值，只影响三件事：浏览器内置样式颜色、可访问性工具的状态描述、以及开发者对阈值的显式声明。Chrome 中，<meter value="85" min="0" max="100" low="60" high="80" optimum="90"> 会触发：::-webkit-meter-optimum-value（绿色）、::-webkit-meter-suboptimum-value（黄色）、::-webkit-meter-even-less-good-value（红色）。
但注意：这些伪元素仅限 WebKit 内核，Firefox 使用 ::-moz-meter-bar，且无法跨浏览器统一配色。真正稳定的做法是：
- 用 CSS 覆盖所有伪元素，或干脆放弃样式依赖，只靠
aria-valuetext提供语音反馈（如aria-valuetext="85%，高于建议阈值"） - low/high 必须落在 min/max 范围内，否则被浏览器忽略；optimum 可超出范围（比如设
optimum="110"表示“永远不够”，但需配合文案说明） - 当 value 刚好等于 low 或 high 时，浏览器行为不一致（Chrome 当作 suboptimum，Firefox 可能归入 low）——别依赖临界点做关键提示
为什么 meter 在真实项目里经常“消失”
不是代码写错了，而是兼容性断层真实存在：IE 完全忽略 <meter>，只显示内部文本；Edge 18 及更早版本渲染为空白；部分国产 Chromium 内核浏览器（如某些政务定制版）也跳过解析。
这意味着你写的 <meter value="68" min="0" max="100">68% used</meter>，在目标用户环境中可能只呈现为“68% used”五个字，毫无图形、无颜色、无语义。
- 降级方案必须手动实现：用
<div role="meter" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" aria-label="磁盘使用率"><div style="width: 68%"></div></div>，再补上 CSS 控制宽度和背景色 - JS 动态更新时，只改
aria-valuenow和子<div>的style.width，不要重写整个 DOM——否则会中断屏幕阅读器焦点流 - 最易被忽略的一点：即使你只支持 Chrome/Firefox，也要检查是否启用了“强制减少动画”系统设置——某些 OS 下，
<meter>的颜色过渡会被禁用，导致状态突变无提示
