如何修复进度条在 Chrome 和 Edge 中圆角被填充色溢出覆盖的问题

为解决现代浏览器（Chrome、Edge）中 progress 元素在 100% 进度时内填充色溢出、破坏外层圆角的问题，只需为其添加 overflow: hidden，即可强制裁剪超出边界的渲染内容，确保视觉一致性。

为解决现代浏览器（chrome、edge）中 progress 元素在 100% 进度时内填充色溢出、破坏外层圆角的问题，只需为其添加 `overflow: hidden`，即可强制裁剪超出边界的渲染内容，确保视觉一致性。

在使用 <progress> 元素实现自定义样式时，开发者常通过 ::-webkit-progress-bar 和 ::-webkit-progress-value 伪元素控制外观。但一个容易被忽视的兼容性问题是：当进度值达到 100% 时，Chrome 和 Edge 会将 progress-value 的渲染区域略微超出容器边界，导致其覆盖掉父容器（即 <progress> 元素自身）设置的 border-radius，使右端圆角“变方”——而 Firefox 则正确遵循了圆角裁剪逻辑。

根本原因在于：<progress> 是替换元素（replaced element），其内部伪元素的渲染行为在不同引擎中存在差异；Webkit/Blink 引擎默认不自动裁剪子内容以适配父容器的圆角，除非显式声明裁剪策略。

✅ 正确解法非常简洁：直接为 <progress> 元素添加 overflow: hidden：

#feedProgress {  width: 200px;  height: 30px;  border: none;  background: #fff;  appearance: none;  border-radius: 0.5rem;  border-bottom-left-radius: 0;  border-bottom-right-radius: 0;  /* 关键修复：启用裁剪 */  overflow: hidden;}

⚠️ 注意事项：

• overflow: hidden 对 <progress> 元素完全安全，不会影响可访问性（ARIA 属性、键盘导航、屏幕阅读器仍正常工作）；
• 该声明仅作用于元素自身盒模型，不影响 ::-webkit-progress-bar 和 ::-webkit-progress-value 的样式继承；
• 不需要为 ::-moz-progress-bar 单独处理（Firefox 原生支持圆角裁剪），但建议保留标准 border-radius 以维持一致性；
• 若后续需支持 IE（已弃用），需改用 <div> 模拟进度条，但现代项目中无需考虑。

✅ 最终效果：无论 value="50" 还是 value="100"，进度条两端均严格保持 0.5rem 圆角，底部左侧/右侧直角也按设计保留，跨浏览器视觉完全统一。