如何取消对Microsoft Edge中的sprite背景图像ENLARGEMENT进行反别名？

Question

检查下面三个图中的问题.我想扩展已经在Mozilla FireFox和Google Chrome中完美运行的功能,以便在Microsoft Edge中完美运行.

---

火狐浏览器: 谷歌浏览器: Microsoft Edge:

---

我想在Microsoft Edge中使用精确像素化,非反锯齿,代表我的精灵图像放大,但无论我尝试过什么,到目前为止在单一浏览器中失败了.我想要一种优雅的CSS方式来扩展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 */
}

Answer 1

我最近在一个网络项目上遇到了完全相同的问题，并且正如评论中提到的，Edge 目前在技术上不支持它。恕我直言，由于这是开发社区 3 年多以来所期待的功能，并且在他们的待办事项中优先级较低，因此我认为在该功能发布后不值得等待。

由于我必须完成工作，所以我为解决问题所做的就是使用更大的源图像，然后使用 CSS 将其缩小（这也是一件好事，尤其是在 Retina 等高密度屏幕上显示时）。

在您的特殊情况下，使用矢量图像（如 SVG）在我看来是完成工作的最佳方式，即使在 Edge 上也是如此，它的重量也比较大的图像更轻。