image-rendering: crisp-edges 在旧版 Safari（≤14）中完全不生效，因其未实现该标准值，必须显式声明 -webkit-optimize-contrast 才能启用禁用平滑插值行为；Firefox 65–77 需额外添加 -moz-crisp-edges 才能在 background-image 等上下文中稳定生效；混用 pixelated 会导致缩小失效且 Safari 忽略，正确写法应按兼容性从高到低依次声明前缀，标准值置尾。
image-rendering: crisp-edges 在旧版 Safari 中完全不生效
旧版 Safari（≤14）根本不识别 crisp-edges，连 fallback 都不触发，直接退回到 auto。这不是漏写前缀的问题，是引擎压根没实现该标准值。必须显式声明 -webkit-optimize-contrast 才能激活它的“禁用平滑”行为——它在 Safari 14 及更早版本中实际就是 crisp-edges 的等效替代。
Firefox 65–77 必须单独写 -moz-crisp-edges
这些版本的 Gecko 引擎虽已支持 crisp-edges，但仅限于部分上下文（如 <img>），对 background-image 或 flex 容器内的图片可能失效。实测中，只写 crisp-edges 时，background-image 缩放仍走双线性插值；加上 image-rendering: -moz-crisp-edges 后才稳定生效。
为什么不能只写 pixelated + -webkit-optimize-contrast？
pixelated 在缩小场景下规范定义为“退化为 auto”，而旧版 Safari 对 pixelated 的支持本身就不完整（Safari 13.1 才开始实验性支持，且仅放大有效）。混用会导致：Chrome/Firefox 优先匹配 pixelated（放大时 OK，缩小时失效），Safari 却因不识别而跳过，最终无一覆盖缩小需求。正确顺序是把兼容性最强的前缀放前面，标准值放最后：
img.pixel-art {
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: crisp-edges;
}
第三方 CSS 库悄悄覆盖你的设置
Tailwind v3.4+、modern-normalize、某些 UI 组件库会注入 image-rendering: smooth 或重置为 auto，尤其在全局选择器如 img 上。检查 computed styles 时发现值被覆盖，不是你写错了，而是被更高优先级规则干掉了。解决方式只有两个：
立即学习“前端免费学习笔记（深入）”；
- 用更具体的选择器，比如
img.pixel-art而非img - 加
!important（仅限兜底，别滥用）
真正容易被忽略的是：哪怕所有前缀都写了，如果图片还没完成加载（比如懒加载未触发、display: none 切换中），浏览器根本不会应用 image-rendering —— 它只对「已缩放的栅格图像」起效，不是样式预设开关。
