IE与其他浏览器的画质差异答案

【问题标题】：Difference in image quality between IE and other browsersIE与其他浏览器的画质差异
【发布时间】：2017-05-19 16:55:59
【问题描述】：

我的图像完全按照它们在 Chrome、Firefox 和 Safari 等浏览器中的显示方式。一旦我打开 Internet Explorer 并在那里看到结果，它就会给我带来很大的不同。

这是铬：

这是 Internet Explorer：

图像均为 460 x 460，添加到图像的 css 样式为：

background: url(../../Icons/Sigma/Vernieuwen.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 100%;
display: inline-block;
height: 20px;
width: 20px;

在 chrome 中这种调整大小可以正常工作，但在 IE 中却不行。现在我发现的所有信息是 IE 使用某种最近邻方法来调整大小，您可以通过更改一些浏览器设置来解决这个问题。

我尝试在 Photoshop 中将图像大小调整为 20 x 20，但结果保持不变。

我的问题：有没有办法让 IE 获得与 Chrome 相同的结果？

【问题讨论】：

这是构建 fontawesome 等库的原因之一
我大部分时间都在使用很棒的字体，但我在这里展示的图标只是一个例子，因为它也与徽标一起发生，但这里的图标更好地说明了 IE 对它的作用。

标签： javascript css google-chrome internet-explorer

【解决方案1】：

试试这个：

img {
    -ms-interpolation-mode: bicubic;
}

来自this answer

【讨论】：

我尝试添加这个，但它并没有给我任何不同。可能是因为它被设置为背景而不是？

【解决方案2】：

你不能用 css 改变它。唯一的方法是使用小图像，将此图像调整为20px x 20px，它将起作用

【讨论】：

正如我在问题中所说：我尝试将 photoshop 中的图像大小调整为 20 x 20，但结果保持不变。
@NielsPeeren 这不是真的。再试一次，删除缓存，或尝试转换为 svg