在 Edge 浏览器中，进度条默认有边框

Question

我在 Edge（版本 25.10586.672.0）中的进度条出现问题。默认情况下，我实现的进度条上有一个边框。 Chrome 和 Firefox 都默认没有边框。我可以通过将 CSS 属性边框设置为 none 来删除它，但是在填充条时仍然有一条分隔线（即，如果条被填充到一半，则填充部分和未填充部分之间有一条小线部分）即使将边框设置为无也不会消失。

我很好奇是否需要为此修改特定的 CSS 属性，或者可能还有另一个根本原因是为什么我在边缘设置了边框？提前致谢！

Answer 1

原因是 Internet Explorer 和 Microsoft Edge 使用了一些特殊的 CSS 选择器。 In this codepen 你可以看到一个工作示例。

重要的 CSS 选择器是：

progress.with-border-fix::-ms-fill {
  border-color: currentColor;
}