Html 在css中创建圆形扇区时，在Chrome和IE中可以看到一条细线

说到css，我是个新手，我正在使用css和jquery的混合创建一个自定义音频播放器。此音频播放器的进度条是一个环形，它使用圆形扇区显示进度。使用线性渐变创建扇区，如下所示：

background-image:
    linear-gradient(-75deg, black 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, white 50%);

在firefox中，这一点非常完美，但在chrome和ie中，在圆圈的一半外侧可以看到一条非常细的白线，大概是线性渐变的一部分应该覆盖的地方

我已经创建了一个显示问题的JSFIDLE

是否有我做错的事情导致了这一点，或者是否有我可以应用的修复程序删除这一行

谢谢你抽出时间

编辑-已经一个多月了，我想我会更新，并说我仍然无法找到这个问题的完整解决方案。处理这一问题的最佳方法是包括一个覆盖边界，正如下面Pustur所建议的那样。

Samiskeen

我也不是CSS专家，但我知道在处理渐变时，每个浏览器都有其所需的前缀：

-moz- is for Mozilla Firefox
-webkit- is for Apple Safari, Google Chrome, and also for ios and Android
-o- is for Opera
-ms- is for Microsoft IE and presumably Edge

您可以在自己的线路上显示所有这些，浏览器将选择正确的线路

例如：

background-image:

-moz-linear-gradient(-75deg, black 50%, transparent 50%),
-moz-linear-gradient(90deg, transparent 50%, white 50%);
-webkit-linear-gradient(-75deg, black 50%, transparent 50%),
-webkit-linear-gradient(90deg, transparent 50%, white 50%);
-o-linear-gradient(-75deg, black 50%, transparent 50%),
-o-linear-gradient(90deg, transparent 50%, white 50%);
-ms-linear-gradient(-75deg, black 50%, transparent 50%),
-ms-linear-gradient(90deg, transparent 50%, white 50%);

该网站列出了主要的CSS规则、属性以及是否需要特定于浏览器的版本

使用前缀可以帮助您解决问题

祝你好运。

---

Jim不确定这是最终解决方案还是最佳解决方案，但至少在chrome上似乎效果不错

HTML:

---

这不是一个真正的解决方案，但您可以添加一个

框阴影：插入0 1px黑色

来隐藏它。我认为这不是前缀问题，或者渐变根本不会显示。我已经试过了，正如上面的评论所说，这不是前缀问题。无论如何谢谢你！您好，您需要一个2px边框来完全覆盖它，这在chrome中很好用，但不幸的是在ie中根本不起作用。

<!-- divs instead of spans -->
<div id="container">
  <div id="position_indicator"></div>
  <div id="inside"></div>
</div>

#container {
  width: 100px;
  height: 100px;
  background-color: black;
  position: relative;
  padding: 20px;
}

#inside {
  width: 90px;
  height: 90px;
  background-color: black;
  border-radius: 100%;
  position: absolute;
  margin-left: 5px;
  margin-top: 5px;
}

#position_indicator {
  border: 1px solid black; /* Fix the border issue! */
  margin-left: -1px; /* Compensate for the new border */
  margin-top: -1px; /* Compensate for the new border */

  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: absolute;
  background-color: black;
  background-image: linear-gradient(-75deg, black 50%, transparent 50%), linear-gradient(90deg, transparent 50%, white 50%);
}