css - 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()}
>

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

提前致谢！

标签： cssgoogle-chromeinternet-explorerspritemicrosoft-edge