根本原因是min或max缺失，浏览器不会自动补全范围来渲染视觉条；Chrome fallback为min="0" max="1"致value越界被丢弃，Firefox直接不渲染；必须显式设置min、max、value三者为纯数字，且满足min
为什么写了value却渲染为空白
根本原因是min或max缺失，浏览器不会自动补全范围来渲染视觉条。Chrome 可能 fallback 成 min="0" max="1"，导致 value="85" 被当成非法值静默丢弃；Firefox 则直接不渲染条形，getBoundingClientRect().height 返回 0。
必须显式写出三者，哪怕数值和默认值一致：min="0" max="100" value="85"。漏掉任意一个，就等于没给浏览器提供有效区间。
-
value必须是纯数字：写成"85%"、"0.85"或"85px"全部被忽略 - 后端返回小数（如
0.72）时，JS 中应先转整：Math.round(parseFloat(apiValue) * 100)，再用Math.min(Math.max(newValue, min), max)做边界 clamp - 所有属性值都必须是字符串形式的数字，但语义上要求是合法数值关系——
min 是硬性前提
low/high/optimum 设了却没颜色变化
这三个不是“开关”，而是语义信号，只有在数值关系合法且浏览器支持时才参与状态判断。一旦写错大小关系，整个颜色逻辑就失效，且不同浏览器响应程度差异极大。
必须满足：min ，且 <code>optimum 落在 [min, max] 内（可等于边界）。例如 min="0" max="100" low="0" 无效（low 不严格大于 min），high="100" 同样不触发“高”状态。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- Firefox 目前完全忽略
low/high/optimum的视觉反馈，所有值统一色块 - Chrome 和 Safari 支持，但阈值判定逻辑不同：同一
value="85"在 Chrome 显黄，在 Safari 可能偏橙 -
optimum不是“中间值”，而是业务定义的理想点，比如电池健康度越低越好，就设optimum="min"
动态更新 value 时卡顿或读屏失效
只改 textContent 或 innerHTML 不会触发重绘，浏览器只响应 value 属性变更。同时，无障碍信息不同步会导致屏幕阅读器感知不到变化。
- 必须用
element.setAttribute('value', newValue)或直接赋值element.value = newValue - 同步更新
aria-valuenow：element.setAttribute('aria-valuenow', newValue) - 避免高频更新（如每 50ms 改一次），Chrome 下易卡顿或闪烁，建议加节流（throttle）
- 别把关键状态提示（如“电量不足”）只放在
<meter></meter>的文本内容里——它只在 CSS 关闭或浏览器不支持时才显示
CSS 自定义样式跨浏览器失效
没有统一的伪元素标准，<meter></meter> 在各引擎下的 Shadow DOM 结构完全不同。强行一套 CSS 覆盖所有浏览器基本不可能，WebKit 和 Gecko 的伪类互不兼容。
- 基础重置必做：
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（整个条），且完全忽略low/high/optimum的颜色逻辑 - 深色模式或高对比度适配需手动覆盖伪元素的
background和border-radius，不能依赖 class 控制填充色
真正难的不是写对属性，而是接受它天生就不一致——Firefox 不响应 low/high，Safari 对 optimum 的着色策略和 Chrome 不同，而所有浏览器都拒绝让你用一个 class 控制颜色。如果你需要精确控制视觉表现、动画或无障碍体验，<meter></meter> 不是起点，而是最后才考虑的轻量补充方案。
