最稳方案是用div模拟进度条：设height、背景色、border-radius，子div用height:100%和渐变背景，百分比文字绝对定位居中；需注意value传数字、显式设max、同步更新value和textcontent、添加aria-labelledby提升无障碍支持。
用 div 宽度模拟进度条嵌入表格单元格
原生 <progress></progress> 不能直接塞进表格单元格里保持对齐，尤其在固定列宽、多行数据时容易错位或被截断。最稳的方式是用 <div> + <code>width + 背景色手动模拟，可控性强、兼容性好、无 JS 也能静态渲染。
常见错误现象：进度条高度不一致、文字偏移、IE 中撑开行高、移动端缩放后错位。
- 给单元格设
padding: 0和vertical-align: middle，避免内边距干扰高度对齐 - 进度容器（
<div class="bar">）设 <code>height: 16px、background-color: #e0e0e0、border-radius: 8px，内部子<div> 设 <code>height: 100%、background: linear-gradient(90deg, #4caf50, #2e7d32)、transition: width 0.3s ease - 百分比文字用
<span></span>叠在进度条上，position: absolute+top: 50%+transform: translateY(-50%)居中，font-size: 12px，color: #333 - 表格列宽建议用
min-width而非固定width，防小屏溢出 - 正确：
progressEl.value = Math.round(uploaded / total * 100) - 错误：
progressEl.setAttribute('value', '65%')（无效） - 错误：
progressEl.value = -5（进度条消失） - 务必显式写
max="100"，别依赖默认值，尤其当你要支持非整数 max（比如 max=255）时 - 推荐写法：
progressEl.value = percent; percentageSpan.textContent = `${percent}%` - 节流建议：用
requestAnimationFrame包一层，或限制最小更新间隔 ≥ 50ms - 无障碍关键：给
<progress></progress>加aria-labelledby指向百分比文字的id，例如<progress aria-labelledby="pct-1"></progress><span id="pct-1">65%</span> - 结构：
<div class="progress-outer"><div class="progress-inner"></div></div> - CSS：
.progress-inner { transform: scaleX(0.65); transform-origin: left; } - 注意：IE 中
transform不触发硬件加速，若动画卡顿，可加backface-visibility: hidden
value 是数字不是字符串，别传 "65%"
很多人写 style.width = "65%" 没问题，但一换到 <progress></progress> 就卡住——因为 <progress></progress> 的 value 属性只接受数字，且必须落在 0 到 max 之间。传字符串如 "65%" 或负数，浏览器会静默忽略或重置为 0。
使用场景：后端返回的是小数（如 0.65），前端需先乘 100 再取整；上传接口返回的是字节数，得自己算百分比再赋值。
JS 更新要操作 .value 和 .textContent 两处
只改 <progress></progress> 的 value，屏幕阅读器能读到变化；只改旁边 <span></span> 的文字，视觉有数但语义丢失。两者必须同步，否则残障用户和自动化测试都可能漏掉进度更新。
容易踩的坑：用 innerHTML 替代 textContent，引入 XSS 风险；节流没做好，高频更新（如每 10ms）导致 UI 卡顿。
IE 兼容时降级用 transform: scaleX()
IE10/11 不支持 <progress></progress> 的样式伪元素（如 ::-webkit-progress-value），也难控制内部结构。此时放弃语义化，改用 transform: scaleX() 配合固定宽度容器更可靠。
性能影响：scaleX() 是合成层变换，比频繁改 width 更流畅，但要注意父容器需设 overflow: hidden 防边缘溢出。
真正麻烦的不是画一根条，而是让百分比数字始终贴在条正中间、不被裁切、在各种缩放比例下都稳，还得让读屏软件知道“现在是 73%”。这些细节堆起来，才是实际项目里最耗时间的部分。
