Edge和IE中的像素化图标

Question

我目前正在开发Web应用程序，对于客户端来说，最重要的事实之一是它对用户友好，因此它包含许多图标。

我们正在使用精灵，因为我们将自己制作精灵，因为该应用将主要包含自定义图标，而您在其他任何地方都找不到。一切工作正常，除非您查看Edge或IE，否则图标将被可怕地像素化和消除锯齿。

我们注意到的一件事是，这似乎仅适用于圆形图标，因此，基本上任何不是直线的东西看起来都是不好的。我将在下面发布一些比较。

如您所见，对于编辑图标，它看起来几乎是相同的，但是对于其他两个，它显然是非常不同的。

生成这些图标的代码如下：

.sprite { //sets the sprite that is going to be used
    background: url('/img/default-icons.png');
    background-repeat: no-repeat;
}

.header-edit { //specific icon, this is for the edit button
    .sprite;
    background-position: -91px -90px;
    background-size: 242px 370px;
}

<button //button for which it is called
      className="header-item header-edit editWizard"
      onClick={e => this.clickSettings()}
>

有人对这种情况为什么发生以及可能的解决方法有任何建议吗？

谢谢！