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

Question

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

Mozilla FireFox: Google Chrome: Microsoft Edge:

我想要在 Microsoft Edge 中刻意像素化、非抗锯齿地表示我的精灵图像 enlargement，但无论到目前为止，我在那个单一浏览器中尝试过的都失败了。我想要一种优雅的 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 */
}

Answer 1

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

而且由于我必须完成工作，我为解决问题所做的是使用更大的源图像并使用 CSS 缩小它们（这也是一件好事，尤其是在高显示时密度屏幕，例如 Retina）。

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

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

How to un-anti-alias a sprite background image ENLARGEMENT in Microsoft Edge?

css

layout

sprite

microsoft-edge