CSS ie 中的图像是像素化的
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21110987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Images in ie are pixelated
提问by totneschap
I've uploaded png images to a website, and they appear perfect in firefox, chrome and safari but they look horrible in ie. I have saved the files from photoshop, and they have a feature under image size that gives you the option to have the image as: bicubic automatic, bicubic sharper, bicubic smoother, bicubic, bilinear and nearest neighbor. Would any of these help?
我已将 png 图像上传到网站,它们在 Firefox、chrome 和 safari 中看起来很完美,但在 ie 中看起来很糟糕。我已经从 photoshop 保存了这些文件,它们在图像大小下有一个功能,让您可以选择将图像设置为:双三次自动、双三次锐化、双三次平滑、双三次、双线性和最近邻。这些会有所帮助吗?
html:
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:
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 */
}
采纳答案by Barney
The old IE method is:
旧的IE方法是:
-ms-interpolation-mode: bicubic;
This is poorly documented.
这没有很好的记录。