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

Question

请查看下面三张图片中的问题。我希望能够将在Mozilla FireFox和Google Chrome已经完美运作的东西扩展到Microsoft Edge中，以达到完美的效果。

---

Mozilla FireFox: Google Chrome: Microsoft Edge:

---

我想要在Microsoft Edge中以有意的像素化、非反锯齿方式呈现我的精灵图像放大，但是到目前为止，无论我尝试了什么都没有成功过。我希望能够用优雅的CSS-only方法来拉伸当前的代码，使之在Microsoft Edge中可以像在另外两个主要浏览器中一样正常工作。有什么我还没有尝试过的方法吗？谢谢！

HTML:

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

CSS：

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 */
}

- Sam

---

这对我来说看起来像是 https://developer.microsoft.com/en-us/microsoft-edge/platform/status/imagerendering/，因此目前很可能没有解决方案。 - Fabian N.

不幸的是，我最近尝试在一个项目中做同样的事情，但我无法找到在IE/Edge中可行的解决方案，所以除非微软提供解决方案，否则你可能会遇到麻烦。 - emmzee

我认为目前没有办法将其作为背景图像。如果您想要一个仅使用CSS的解决方案，我能想到的唯一方法是首先将其制作为自定义图标字体的一部分，并通过应用字体大小来放大它，也许可以实现。 - ZhaoYiLi

尝试使用SVG，其中“像素”由正方形形状组成。（您的最低IE要求是什么？） - mfluehr

你能否将图片缩放后再放到网页上，这样就不需要在浏览器中进行缩放了吗？ - IiroP

Answer 1

最近我在一个Web项目中遇到了同样的问题，正如评论中所提到的，它目前在Edge浏览器上并不受支持。在开发社区期望该功能已经超过3年，并且在他们的待办列表中优先级较低的情况下，我认为等待此功能发布是不值得的。

既然我必须完成这项工作，我所做的解决办法是使用更大的源图像，然后使用CSS将它们缩小（特别适用于高密度屏幕，如Retina显示屏）。

在您的特殊情况下，使用矢量图像，如SVG，在Edge浏览器上获得所需效果是最好的方法，它也比较大的图像更轻巧。

- WizardNx