<p>width: var(--percent)% 一定不生效，因CSS解析禁止单位拼接；正确写法是width: calc(var(--percent, 0) * 1%)，其中--percent存纯数字，由calc()注入单位并提供回退值。</p>
直接用 width: var(--percent)% 一定不生效，浏览器会丢弃整条声明——这不是兼容性问题，是 CSS 解析规则本身禁止单位拼接。
为什么 width: var(--percent)% 总是失效
CSS 自定义属性的值是字符串，var(--percent) 替换后若为 "75"，那 var(--percent)% 就变成 "75%"；但若原变量存的是 "75%"，拼出来就是 "75%%"，非法；更糟的是，如果变量未定义或为空，结果可能是 "%" 或 "undefined%"，全部触发声明失效。浏览器不会尝试“补单位”或“截字符串”，只认最终字面量是否合法。
正确写法：用 calc() 注入单位
必须把数字和单位拆开，由 calc() 组合：
div.bar {
--percent: 68;
width: calc(var(--percent, 0) * 1%);
}-
--percent只存纯数字（如68，不是"68%"） -
calc(var(--percent, 0) * 1%)中，1%提供单位，乘法结果自动带% -
var(--percent, 0)的 fallback 防止未定义时宽度塌缩为 0 - 这个写法在 Chrome、Firefox、Safari（≥14.5）、Edge 全部支持，IE 不支持
calc()里的自定义属性，别考虑
JS 更新时，必须设在目标元素上
改 :root 里的变量对局部条形图无效，除非它显式继承且 CSS 选择器匹配到该元素：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
barEl.style.setProperty('--percent', 73) - ❌ 错误：
document.documentElement.style.setProperty('--percent', 73)（除非你所有条形图都读 :root） - 避免在循环里反复调用
getComputedStyle(barEl).width，会强制同步重排 - 如果多个条形图共用同一套样式，建议每个
div.bar单独设变量，而不是靠 class 统一控制
父容器宽度不稳定会导致条形图错位
百分比宽度永远相对于父容器计算，而父容器宽度假如是 max-width: 100% + padding，又没设 box-sizing: border-box，实际可用宽度就变小了，width: calc(var(--percent) * 1%) 算出来的仍是错误基准下的值。
- 务必给父容器加
box-sizing: border-box - 避免用
display: table-cell或inline-block包裹条形图容器——它们的宽度计算逻辑更复杂 - 移动端小屏下加
min-width: 0防止 flex 或 grid 子项被压缩到看不见条 - 负数或 0 值要单独处理：加
.bar.zero { width: 0 !important; }类，因为calc(-5 * 1%)是负宽度，可能溢出或渲染异常
真正卡住的从来不是怎么写那行 calc()，而是谁来保证每个 div.bar 上的 --percent 值及时、准确、非空地更新——这层逻辑一旦松动，CSS 再规范也只显示一个静止的 0%。
