IE（含IE11和旧版Edge）完全不支持meter的low、high、optimum属性，既不触发样式变化也无fallback渲染，因其未实现规范解析引擎，需用div+JS手动模拟状态与视觉反馈。
high、low、optimum 在 IE（包括 IE11 和旧版 Edge）中**完全不触发任何样式变化**，连 fallback 渲染都没有——它们被直接忽略。
IE 对 meter 属性的兼容性事实
IE 系统级不支持 meter 的语义化状态判断逻辑。即使你写了 <meter min="0" max="100" low="20" high="80" optimum="50" value="90"></meter>，IE 也不会：
- 把
value=90渲染成“过高”状态（比如红色边框或背景） - 根据
optimum=50调整颜色倾向（如绿色表示接近最优） - 识别
low或high区间并应用对应视觉反馈
它只可能显示一个空的、无刻度、无颜色的灰色条（取决于系统主题），或者干脆不渲染条状结构，仅保留子文本内容（如 “90%”）。
为什么不能依赖 IE 的 meter 行为？
根本原因不是“样式没写对”，而是 IE 根本没实现 meter 的规范解析引擎：
-
low、high、optimum不是 CSS 可控属性，而是浏览器内置渲染逻辑的输入参数 —— IE 没这逻辑 - IE 甚至不解析这些属性值，
getBoundingClientRect()可能返回 0 高度，offsetHeight为 0 - 用
setAttribute('low', '20')动态设置也无效，因为 DOM 层面就未绑定响应
替代方案必须显式降级
如果你的应用仍需支持 IE，meter 就不能当作功能组件用，只能当语义占位符 + 完全手动控制的视觉层：
- 用
<div class="meter-fallback"><span class="bar" style="width:90%"></span></div>替代原生meter - 通过 JS 判断
value与low/high/optimum的关系，手动加 class（如is-too-high） - 所有颜色、边框、警告图标都靠 CSS class 控制，不依赖任何伪元素（IE 不支持
::-webkit-meter-bar等） - 务必加
aria-valuenow、aria-valuemin、aria-valuemax，否则屏幕阅读器读不出数值
真正容易被忽略的点：很多人以为只要写了 low 和 high，再加点 CSS 就能在 IE 里“差不多”生效 —— 实际上，IE 连这些属性的 DOM property 都不暴露，meter.low 返回 undefined，meter.hasAttribute('low') 才是唯一可靠的存在检查方式。
