ie中的图像是像素化的答案

【问题标题】：Images in ie are pixelatedie中的图像是像素化的
【发布时间】：2014-02-02 08:40:42
【问题描述】：

我已经将 png 图像上传到一个网站，它们在 Firefox、chrome 和 safari 中看起来很完美，但在 ie 中看起来很糟糕。我已经从 photoshop 中保存了文件，它们在图像大小下有一个功能，可以让您选择将图像设置为：双三次自动、双三次锐化、双三次平滑、双三次、双线性和最近邻。这些会有帮助吗？

html：

<ul class="social">
  <li><a target="_blank" href="https://plus.google.com/+ToadhallcottagesCoUk/posts"><img onmouseout=this.src='/images/googleplusgrey-flat.png' onmouseover=this.src='/images/googleplus-flat.png' src="/images/googleplusgrey-flat.png" width="38" height="38" alt="Toad Hall Cottages Google Plus Page"</a></li>
  <li><a target="_blank" href="http://www.twitter.com/thcottages"><img onmouseout=this.src='/images/twittergrey-flat.png' onmouseover=this.src='/images/twitter-flat.png' src="/images/twittergrey-flat.png" width="38" height="38" alt="Toad Hall Cottages on Twitter" /></a></li>
  <li><a target="_blank" href="http://www.facebook.com/holidaycottages"><img <img onmouseout=this.src='/images/facebookgrey-flat.png' onmouseover=this.src='/images/facebook-flat.png'  src="/images/facebookgrey-flat.png" width="38" height="38" alt="Toad Hall Cottages Facebook page"/></a></li>
  <li><a target="_blank" href="http://www.pinterest.com/thcottages/"><img <img onmouseout=this.src='/images/pinterestgrey-flat.png' onmouseover=this.src='/images/pinterest-flat.png' src="/images/pinterestgrey-flat.png" width="38" height="38" alt="Toad Hall Cottages Facebook page" /></a></li>
</ul>

css：

img.icon { 
  vertical-align: middle; 
  margin-right: 8px; 
  margin-left: 2px;
  image-rendering:optimizeSpeed;             /* Legal fallback */
  image-rendering:-moz-crisp-edges;          /* Firefox        */
  image-rendering:-o-crisp-edges;            /* Opera          */
  image-rendering:-webkit-optimize-contrast; /* Safari         */
}

【问题讨论】：

可怕的浏览器会呈现可怕的东西......你介意分享你的css和html，以便我们提供帮助！ :)
您应该以网站要求的尺寸将图像保存在服务器上 - 例如如果您的标题显示为 800x100 像素，则您的图像也应该是 800x100 像素。
我已经上传了css和html
您不需要使用Javascript 来完成图像翻转。相反，您应该查看精灵图像，并在CSS 中完成所有操作。这也减少了浏览器需要发出的 HTTP 请求的数量。 css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite
我的图片是 150 像素 x 150 像素，然后在网页上缩小了尺寸，这不会给它更好的分辨率@Njol？

标签： css image internet-explorer image-processing photoshop

【解决方案1】：

旧的IE方法是：

-ms-interpolation-mode: bicubic;

这没有很好的记录。

【讨论】：

这个问题可以通过jQuery插件解决：stackoverflow.com/questions/34965904/…
想象一下，如果 OP 要求 jQuery 解决方案^
这不是默认插值吗？我看不出这和什么都没有（在 IE 11 中）之间的区别。
嗨@BarryCap，不——此功能仅在 IE7 和 8 中可用——IE9 及更高版本不需要它。