meter标签本质是语义容器，非可视化组件；必须显式设置min、max、value三个数字属性，缺一不可，否则Chrome可能fallback为0/1、Firefox直接不渲染，导致进度条空白。
meter 标签本身不“实现”可视化，它只提供语义容器；真正能控制颜色、粗细、状态反馈的，是显式声明的 min、max、value 三属性，缺一不可——漏掉任意一个，Chrome 可能 fallback 成 min="0" max="1"，Firefox 直接不渲染条形，getBoundingClientRect().height 返回 0。
为什么写了 value 却没显示进度条
常见错误是只设 value，漏掉 min 或 max。浏览器不会自动补默认值来渲染视觉条。
-
min和max必须显式声明为数字：min="0"合法，min="zero"或min="0px"无效 -
value必须是数字：value="75%"、value="0.75"都会被忽略，得转成75或75.0 - 后端返回小数（如
0.72）时，JS 中建议统一处理：Math.round(parseFloat(value) * 100)，再clamp到[min, max]范围内
low / high / optimum 怎么影响颜色却看不出效果
这三个属性只有在 min 且全部显式存在时才参与语义判断；但浏览器实现差异极大：
- Chrome：根据
value相对位置切换背景色（绿色→黄色→红色），optimum在两端也生效 - Firefox：目前完全不支持
low/high/optimum的视觉反馈，所有值都显示同一色块 - Safari：支持但阈值判定逻辑不同，比如
value=85在 Chrome 显黄，在 Safari 可能偏橙 -
optimum不是“中间值”，而是业务定义的理想点，可以等于min（如电池健康度越低越好）
怎样让 meter 在旧浏览器或屏幕阅读器里可用
meter 在 IE 和 Edge 18 及更早版本中完全不渲染，只显示内部文本；NVDA、VoiceOver 等读屏工具基本不读 low/high 含义，仅报“meter 75”。
- 必须提供可访问 fallback：用
aria-label或隐藏文本，例如aria-label="电池电量 15%，低于警戒线" - 结构降级更可靠：改用
<div role="meter" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" data-status="critical"></div>+ 对应 class 控制样式 - 别把关键状态提示（如“电量不足”）只放在
meter内容文本里——它只在 CSS 关闭或浏览器不支持时才显示
真正难的不是写对属性，而是接受它本质上是个「语义容器」：视觉表现不可控，语义传达不完整，跨浏览器一致性几乎不存在。如果你需要精确控制颜色、动画或无障碍体验，meter 不是起点，而是最后才考虑的轻量补充方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
