progress.value赋值无效，首要检查max是否显式设置；必须同时声明value和max，且value为0–max间的纯数字，否则被静默截断或退至不确定态。
progress.value 赋值无效？先检查 max 是否显式设置
直接写 element.value = 75 却没反应，90% 是因为漏了 max 属性。浏览器默认 max="1"，所以 value="75" 实际超出范围，被静默截断为 1 —— 进度条要么满格、要么不渲染。
必须同时声明 max 和 value，且 value 必须在 0 到 max 之间（含端点）：
<progress value="30" max="100"></progress>
-
max和value都只接受数字，不要加引号或单位（如max="100px"或value="50%"会失效） - 初始化时建议显式写全：
<progress value="0" max="100"></progress>，避免依赖 JS 后续补 - Safari 尤其敏感：如果
max是字符串（比如模板拼接来的"100"），而value是数字30，可能直接不渲染填充块
用 JavaScript 更新 value 的正确姿势
别用 setAttribute('value', '65')，它传的是字符串，在旧版 Safari 或 iOS WebKit 中可能不触发重绘；也别替换整个 HTML 字符串（innerHTML），会丢事件、闪动、重置状态。
最可靠方式是直接赋值 DOM 属性：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
const bar = document.querySelector('progress');<br>bar.value = 65; // ✅ 数字类型，直接生效
- 更新前做范围校验更安全：
bar.value = Math.min(Math.max(0, newValue), bar.max) - 高频更新（如
requestAnimationFrame每帧都设）没必要——<progress></progress>本身无动画能力，视觉平滑得靠 CSStransition控制background-size或伪元素 - 服务端推送场景下，避免
value每 50ms 更新一次，部分旧 Safari 会卡顿或跳变
样式定制只能靠伪元素，::before/::after 不起作用
<progress></progress> 是替换元素（replaced element），普通 CSS 选中器和 ::before/::after 默认无效。真正能控制样式的只有浏览器私有伪类，且必须配合 appearance: none：
progress { appearance: none; }<br>progress::-webkit-progress-bar { background: #f0f0f0; }<br>progress::-webkit-progress-value { background: #3b82f6; }<br>progress::-moz-progress-bar { background: #3b82f6; }
- Chrome/Edge/Safari（WebKit/Blink）用
::-webkit-progress-bar和::-webkit-progress-value；Firefox 只认::-moz-progress-bar，且无法单独样式化背景轨道 -
::-webkit-progress-value宽度由value/max决定，不能用width覆盖，也不能加box-shadow或复杂background-image（新版 Chrome 支持渐变，Firefox 完全不支持） - 想统一改颜色，现代 Chromium 支持
accent-color: #3b82f6，比写一堆伪元素更简洁、更可靠
什么时候该放弃 progress 标签？
当需要这些功能时，<progress></progress> 就不是最佳选择：
- 进度方向反向（从右往左填充）
- 多色分段（如红→黄→绿）、圆角渐变填充、阴影或描边
- 无障碍要求高，又需自定义辅助文本（
<progress></progress>虽支持aria-valuenow，但屏幕阅读器对伪元素内容不可读） - 需兼容 IE 或旧版 Android Browser（它们对伪元素支持极差，甚至不渲染
value）
此时用 <div role="progressbar"> + <code>aria-valuenow + width 控制，反而更可控、更可测、更易调试。原生 <progress></progress> 看似简单，但它的“确定性”只存在于属性层面，样式和行为边界非常窄。
