progress标签默认样式跨浏览器不一致，因chrome/firefox/safari的ua样式实现不同：chrome用-webkit-appearance+伪元素，firefox依赖::-moz-progress-bar，safari对::-webkit-progress-value支持不稳定；必须重置appearance并分别定制三套伪元素才能统一外观。
progress 标签的默认样式为什么在 Chrome/Firefox/Safari 里长得不一样
因为各浏览器对 <progress></progress> 的 UA 样式（User Agent Stylesheet）实现完全不同：Chrome 用 -webkit-appearance: progress-bar + 伪元素控制，Firefox 用 appearance: none 配合 ::-moz-progress-bar，Safari 则依赖 WebKit 旧版私有属性且对 ::-webkit-progress-value 支持不稳定。不重置就直接写 CSS，大概率只在一个浏览器生效。
必须覆盖的三个核心伪元素
要统一外观，得同时处理三套浏览器专属伪元素，缺一不可：
-
progress::-webkit-progress-bar：Chrome / Edge / 新版 Safari 的背景轨道 -
progress::-webkit-progress-value：同上，进度填充条（注意它默认是 inline-block，设 width 无效，得用transform: scaleX()或 flex 布局） -
progress::-moz-progress-bar：Firefox 唯一可用的填充条伪元素（不支持 background 渐变，仅 solid color）
别漏掉 progress 自身的 reset：appearance: none 在 Firefox 和 Safari 中能禁用原生样式，但 Chrome 必须靠 -webkit-appearance: none 单独写。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
一个能跨浏览器生效的最小可行样式块
progress {
appearance: none;
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
background-color: #e0e0e0;
overflow: hidden;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: #4a90e2;
border-radius: 4px;
transition: width 0.3s ease;
}
progress::-moz-progress-bar {
background-color: #4a90e2;
}
关键点：
-
overflow: hidden是为了防止 Firefox 下::-moz-progress-bar溢出圆角 - 不要给
::-webkit-progress-value设width——它由浏览器根据value和max自动计算，硬设会失效 - 如果需要渐变色，只能在 WebKit 内核中用
background: linear-gradient(...)，Firefox 不支持
动态更新时卡顿或跳变的常见原因
progress 元素本身不触发重排，但频繁修改 value 属性（比如每 50ms 更新一次）在低性能设备上仍可能造成视觉卡顿，尤其搭配 CSS transition 时：
- 避免用
requestAnimationFrame连续改value，改用节流（throttle）控制更新频率 - 如果进度值来自异步加载，确保初始
value="0"，否则 Safari 可能渲染空白或错位 - 在 Vue/React 等框架中，不要把
<progress value="{dynamicValue}"></progress>直接绑在响应式变量上——某些版本 React 会因 diff 策略导致 value 被重置为 0 再跳变，加key或用 ref 手动更新更稳
真正麻烦的不是写法，而是每次改完都得开三个浏览器窗口挨个点开 DevTools 查看伪元素是否被正确命中——WebKit 的伪元素调试器藏得深，Firefox 的则根本不显示 computed style 里的渐变 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
