如何反别名一个雪碧背景图像放大在微软边缘？

Question

检查以下三个数字中的问题。我想扩展已经在Mozilla FireFox和Google中完美工作的内容，以便在Microsoft中也能完美地工作。

Mozilla FireFox：

谷歌Chrome：

Microsoft Edge：

​

我想要一个深思熟虑的像素化的，非反别名的，我的雪碧图像放大在Microsoft中的表现，但不管我尝试了什么，到目前为止在单一浏览器中都失败了。我想要一种优雅的CSS方式来扩展当前的代码，这样在Microsoft中它就可以像在其他两个主要浏览器中那样工作了。我还没试过什么？提前感谢！

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

Answer 1

最近，我在一个web项目上遇到了同样的问题，正如评论中提到的那样，它目前在技术上不受Edge的支持。以及IMHO，因为它是开发社区3年多来的一个预期特性，而且在它们的待办事项中优先级较低，我认为在这个特性发布后再等待它是不值得的。

由于我必须完成这项工作，我解决问题的方法是使用更大的源图像，并使用CSS缩小它们(这也是一件好事，特别是当显示在诸如Retina这样的高密度屏幕上时)。

在您的特殊情况下，使用矢量图像(如SVG )是即使在Edge上完成工作的最佳方法，它的重量也比较大的图像轻。