最轻量兼容的进度条实现是用width百分比控制内层div，外层td设固定高度和overflow:hidden，内层div设height:100%和背景色，并注意height、overflow、display、单位格式、文字布局、IE兼容、XSS防护、sub-pixel渲染及box-sizing等细节。
用 width 控制内层 div 实现进度条效果
直接在表格单元格里塞一个带背景色的 div，用 width 百分比控制长度，是最轻量、兼容性最好的方式。不需要 JS，纯 CSS 就能跑。
关键点在于：外层 td 设固定高度和 overflow: hidden，内层 div 设 height: 100% 和背景色，再用行内 style="width: 65%" 动态控制宽度。
常见错误是忘了设 height 或漏掉 overflow: hidden，导致进度条撑开单元格或溢出边界。
-
td必须有明确高度（如height: 24px），否则内层div的height: 100%无效 - 内层
div推荐用display: inline-block或display: block，避免默认inline元素不响应height - 百分比值必须是数字加
%，不能写成小数（比如0.65）或无单位整数（比如65）
避免文字遮挡和对齐错位
进度条常要同时显示数字（如 “65%”），但文字容易盖住条形、或左右不对齐。解决思路是把文字和条形分离布局，而不是叠在一起。
立即学习“前端免费学习笔记（深入）”；
推荐做法：用 position: relative 包裹整个单元格内容，条形 div 绝对定位铺底，文字用 span 正常流式排布并居中。
如果强行用 text-align: center + line-height 居中文字，会因字体渲染差异导致视觉偏移，尤其在 Chrome 和 Safari 下表现不一致。
- 文字建议用
font-size: 12px或13px，太大容易换行或挤压条形空间 - 若需右对齐数字（如 “65%” 靠右），不要靠
padding-right挤，改用text-align: right+ 确保容器足够宽 - IE11 不支持
flex在td内生效，所以别用display: flex做居中
动态渲染时注意 HTML 转义和 XSS 风险
如果进度值来自后端变量（比如模板引擎里的 {{ progress }}），直接拼进 style 属性容易出问题：值含非数字字符（如 “65%”）、空值、负数，都会让样式失效甚至引发安全漏洞。
务必在服务端或模板层做清洗：只保留数字部分，转为合法整数或浮点数，再补上 %。前端 JS 渲染同理，别直接把用户输入塞进 style。
- 错误写法：
<div style="width: {{ value }}>—— 若value是"65%; background:red"，就注入了额外样式 - 正确做法：后端输出前过滤，例如 Python 的
int(float(value))，再限制范围max(0, min(100, ...)) - 前端 JS 动态更新时，用
element.style.width = progress + '%'，而非修改innerHTML
移动端缩放和高 DPI 屏幕下的像素模糊
在 Retina 屏或 zoom=125% 的 Windows 上，width: 65% 可能渲染成非整像素宽度（如 13.7px），导致条形边缘发虚、颜色变浅。
这不是 bug，是 sub-pixel 渲染的正常现象。缓解方法有限，最有效的是强制使用整数像素宽度，前提是知道容器总宽。
- 若表格列宽固定（如
120px），可改用width: 78px替代width: 65%（120 × 0.65 = 78） - 避免用
em或rem单位控制进度条宽度，它们会随字体缩放而波动 - CSS
transform: scaleX()虽能规避 sub-pixel，但会放大锯齿，且影响子元素渲染质量，不推荐
td 的 box-sizing 默认值（content-box）。加上 box-sizing: border-box 后，padding 不再撑宽条形区域，能更精准控制视觉占比。 
