标签表示已知范围内的标量值位置，非进度条；需正确设置 min/max/value/low/high 才具语义；样式定制须分浏览器处理伪元素；多数场景推荐 + ARIA 替代。
<meter></meter> 标签不是进度条，不能用 value 表示“已完成比例”，它只表达一个**已知上下限范围内的标量值位置**。误用 min/max 或忽略 low/high 会导致语义失效、样式不触发、甚至被屏幕阅读器错误解读。
meter 的 min/max/value 必须构成有效数值区间
浏览器会校验 min value max，否则 <meter></meter> 可能不渲染或回退为纯文本。默认 min=0、max=1，但直接写 value="85" 而不设 max="100" 就等于说“85 超出上限 1”，结果不可预测。
- 必须显式设置
min和max，哪怕和默认值一样（如min="0" max="100"） -
value必须是数字类型（字符串如"60"会被强制转 Number，但建议写纯数字） - 若
value超出[min, max]，部分浏览器（如 Firefox）会显示空内容或警告，Chrome 可能截断但不报错 - 示例正确写法：
<meter min="0" max="100" value="85">85%</meter>
low/high/optimum 决定视觉状态，但不控制颜色
这些属性本身不生成 CSS 类或内联样式，只是提供语义信号；浏览器根据它们与 value 的相对关系，内部决定是否启用“低/高/最优”状态样式（如红色/橙色/绿色背景）。你无法靠改属性值直接变色，得靠 CSS 伪元素钩子。
-
low必须 >min，high必须 max，且lowhigh，否则状态判断失效 -
optimum若在[low, high]内，表示“最佳区间”；若 low，表示“越低越好”；若 >high，表示“越高越好” - Firefox 仅支持
::-moz-meter-bar，WebKit（Chrome/Safari）需用::-webkit-meter-inner-element+ 多层嵌套伪元素 - 不要依赖
optimum触发样式——目前没有任何主流浏览器用它改变默认外观
CSS 自定义 meter 样式必须分浏览器处理
没有统一的伪元素标准，<meter></meter> 在各引擎下的 Shadow DOM 结构完全不同，强行一套 CSS 覆盖所有浏览器基本不可能。最小可用方案是：先重置默认宽高，再按引擎分别注入规则。
立即学习“前端免费学习笔记（深入）”；
- 基础重置：
meter { width: 200px; height: 24px; -webkit-appearance: none; appearance: none; } - WebKit（Chrome/Safari）关键伪类：
meter::-webkit-meter-bar（背景轨）、meter::-webkit-meter-optimum-value（最优区）、meter::-webkit-meter-suboptimum-value（次优区） - Firefox 关键伪类：
meter::-moz-meter-bar（整个条）、meter::-moz-meter-optimum（仅当 value 在 optimum 附近才生效，实际兼容性差） - 务必加
!important—— 浏览器 UA 样式优先级极高，不加很可能被覆盖
替代方案比硬调 meter 更可靠
如果你需要精确控制颜色、动画、响应式缩放或无障碍标签（ARIA），<meter></meter> 的语义优势很快会被定制成本抵消。此时更推荐用 <div> + ARIA + CSS 实现等效效果。
<ul>
<li>用 <code>role="progressbar" + aria-valuenow/aria-valuemin/aria-valuemax 模拟语义，同时完全掌控 DOM 结构
aria-valuetext="CPU 使用率：85%，高于正常范围" 提供明确语音反馈<meter></meter> —— 服务端无法渲染 Shadow DOM，首屏可能空白或样式错乱最常被忽略的一点：meter 的语义价值只在配合辅助技术时成立，而它的样式可控性几乎为零。与其花半天调通 WebKit/Firefox 双引擎伪元素，不如确认业务是否真的需要这个标签——多数数据展示场景，<progress></progress>（任务进度）或自定义组件更省事也更稳定。
