Css 如何在Microsoft Edge中取消精灵背景图像放大的反锯齿？

检查下面三幅图中的问题。我想扩展已经在Mozilla FireFox和Google Chrome中完美运行的功能，在Microsoft Edge中也能完美运行

---

Mozilla FireFox:Google Chrome:Microsoft Edge:

---

我希望在Microsoft Edge中对我的sprite图像进行仔细的像素化、非抗锯齿的放大，但无论我尝试了什么，到目前为止在单一浏览器中都失败了。我想要一个优雅的CSS唯一的方式来扩展当前的代码，使它在微软的边缘工作，因为它已经在其他两个主要浏览器。我还没试过什么？提前谢谢

HTML:

---

我最近在一个web项目上遇到了完全相同的问题，正如评论中提到的，Edge目前在技术上不支持该问题。IMHO，因为这是开发社区3年来一直期待的特性，而且在他们的积压工作中优先级很低，我认为在这个特性发布之后不值得等待

由于我必须完成这项工作，所以我解决这个问题的方法是使用较大的源图像，并使用CSS将其缩小（这也是一件好事，尤其是在高密度屏幕（如视网膜）上显示时）

---

在您的特殊情况下，使用SVG等矢量图像是完成工作的最佳方式，即使是在边缘，它的重量也比更大的图像轻。

在我看来，目前没有解决方案的可能性很大。不幸的是，我在最近的一个项目中尝试了同样的方法，但我无法找到一个在IE/Edge中工作的解决方案，所以，在微软提供解决方案之前，你很可能运气不佳。我认为目前还没有一种方法可以将其作为背景图像。如果你想要一个只使用CSS的解决方案，我能想到的唯一一件事就是首先将其作为自定义图标字体的一部分，然后通过应用字体大小将其放大。也许可以尝试使用SVG，其中“像素”由正方形组成。（你们对IE的最低要求是什么？）？

<box><icon style="background-position:0px -3081px"></icon></box>

box {
float: left;
text-align: center;
width: 40px;
}

icon {
background:url(../layout/icons.png) no-repeat;
background-color: white;
margin: auto;
margin-top: -10px;
width:13px;
height:13px;
display: block;

-ms-transform: scale(3);
-o-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3);

-ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
image-rendering: -moz-crisp-edges;          /* Firefox */
image-rendering: -o-crisp-edges;            /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated;                 /* Chrome */
image-rendering: optimizeSpeed;             /* stop smoothing, speeden up instead */
image-rendering: optimize-contrast;         /* CSS3 Proposed */
}