Safari中progress高度不生效需加appearance: none；改颜色须同时设置::-webkit-progress-bar和::-webkit-progress-value；accent-color仅支持15.4+且仅控填充色；圆角毛边需overflow: hidden裁切。
progress在Safari中height不生效？必须加appearance: none
直接写 progress { height: 8px; } 在 Safari（尤其是 15.4 之前）几乎无效——它只压扁外层容器，内部填充条仍细窄、居中悬浮。根本原因是 Safari 把 <progress> 当作原生控件渲染，绕过 CSS 盒模型。
真正起效的写法是：progress { -webkit-appearance: none; appearance: none; height: 8px; }。注意三点：
-
-webkit-appearance: none和appearance: none必须同时存在，Safari 15.4+ 支持标准属性，但旧版只认前缀 - 漏掉任一，
::-webkit-progress-value的高度控制就会失效，填充色区域上下留白 - 加完之后，
border-radius、overflow: hidden才真正可控，否则圆角只作用在外框上
Safari中progress颜色改不了？伪元素必须配全
Safari（Blink/WebKit 内核）只识别 ::-webkit-progress-bar 和 ::-webkit-progress-value，不支持标准 ::progress-bar 或 Firefox 的 ::-moz-progress-bar。
常见错误是只写了 progress::-webkit-progress-value { background: #4a90e2; }，却漏掉轨道样式，导致未填充部分仍是系统灰。正确写法要成对出现：
立即学习“前端免费学习笔记（深入）”；
progress::-webkit-progress-bar { background-color: #e0e0e0; border-radius: 4px; }progress::-webkit-progress-value { background-color: #4a90e2; border-radius: 4px; }- 两个伪元素的
border-radius值必须一致，否则 Safari 下圆角断裂 - 不要用
color或background直接作用于progress元素本身——它对替换元素无效
Safari 15.4+ 能用accent-color吗？可以，但有局限
现代 Safari（15.4+）支持 accent-color，写 progress { accent-color: #4a90e2; } 确实能一键改填充色，但它只影响进度条本体，轨道底色仍需靠 ::-webkit-progress-bar 单独设。
所以实际项目中建议“双保险”：
- 先写
progress { accent-color: #4a90e2; }作为现代浏览器兜底 - 再叠加
progress::-webkit-progress-value { background-color: #4a90e2; }兼容旧版 Safari 和 Chrome - 别指望
accent-color覆盖所有场景——它不支持渐变、不控制轨道、iOS Safari 中可能被 UA 样式覆盖
圆角+细高进度条在Safari里总出毛边？overflow: hidden是关键
即使写了 height: 6px; border-radius: 3px;，Safari 下填充条边缘仍可能发虚或露直角——因为 ::-webkit-progress-value 默认有内边距，且圆角不自动裁切溢出。
稳妥方案是用容器裁切：
- 给
progress设height: 8px; border-radius: 4px; overflow: hidden; - 再让
::-webkit-progress-value的height: 100%和border-radius: 4px对齐 - 或者外层套一层
<div style="height: 6px; border-radius: 3px; overflow: hidden;"><progress></div>，更可控 - 避免用
transform: scaleY()拉伸——Safari 渲染会锯齿，且破坏语义高度比例
最易被忽略的一点：Safari 对 ::-webkit-progress-bar 的 background-color 有最低透明度限制，纯黑或深色背景下可能发灰；如果发现轨道颜色不对，优先检查是否漏写了该伪元素，而不是怀疑颜色值本身。
