如何在Microsoft Edge中实现精灵背景图放大后的无抗锯齿效果？

我完全懂你的需求——就是要让Edge里放大后的精灵图，和Chrome、Firefox呈现一模一样的刻意像素化、无抗锯齿效果。看了你现有的CSS代码，其实已经覆盖了不少关键属性，但Edge（Chromium内核）对于「背景图+transform缩放」的渲染有一些特殊逻辑，我们可以调整几个点来搞定：

方法1：优化image-rendering属性的顺序与作用范围 #

Edge现在基于Chromium，但属性优先级和生效逻辑和Chrome略有差异，我们可以调整属性顺序，同时把像素化规则也应用到父元素，确保渲染规则覆盖到背景图：

box {
  float: left;
  text-align: center;
  width: 40px;
  /* 给父元素也加上像素化渲染规则，确保背景图渲染继承该属性 */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

icon {
  background:url(../layout/icons.png) no-repeat;
  background-color: white;
  margin: auto;
  margin-top: -10px;
  width:13px;
  height:13px;
  display: block;
  transform: scale(3);
  /* 调整属性顺序，把标准属性放在最后确保生效，移除旧版/冗余属性 */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  /* 旧IE属性对Edge无用，直接移除 */
  /* -ms-interpolation-mode: nearest-neighbor; */
}

方法2：用background-size替代transform: scale（更可靠的方案） #

transform缩放是对整个元素的变换，部分浏览器对背景图的渲染可能会绕过image-rendering规则。我们可以直接通过background-size缩放精灵图，同时调整background-position的数值，这种方式更直接，渲染稳定性更高：

假设你的原始图标是13x13像素，需要放大3倍到39x39像素：

<box><icon class="scaled-icon"></icon></box>

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

icon.scaled-icon {
  background:url(../layout/icons.png) no-repeat;
  background-color: white;
  margin: auto;
  margin-top: -30px; /* 高度从13px变为39px，按比例调整margin-top */
  width:39px; /* 13px × 3 */
  height:39px; /* 13px × 3 */
  display: block;
  /* 按3倍比例缩放背景图，若知道精灵图原始高度，也可以直接写具体数值（比如原始高度×3） */
  background-size: auto calc(100% * 3);
  /* 背景位置同步放大3倍，原始是0 -3081px，对应调整为0 -9243px */
  background-position: 0px -9243px;
  /* 确保像素化渲染 */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

这种方式直接操作背景图的尺寸和位置，避免了transform变换带来的渲染差异，在所有现代浏览器（包括Edge）中都能稳定实现像素化效果。

额外检查点 #

• 确保你的Edge是最新版本，旧版非Chromium内核的Edge对新CSS属性支持有限，建议升级到最新稳定版；
• 清除浏览器缓存，有时候旧的渲染缓存会导致新CSS不生效。

内容的提问来源于stack exchange，提问作者Sam