2014-01-14 36 views
6

我已經將png圖像上傳到網站,並且它們在firefox,chrome和safari中顯示完美,但它們在ie中看起來很可怕。我已經從photoshop保存了文件,並且它們在圖像大小下有一項功能,可讓您選擇將圖像顯示爲:雙三次自動,雙三次更清晰,雙三次平滑,雙三次,雙線性和最近鄰居。這些有幫助嗎?ie中的圖像像素化

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   */ 
} 
+2

可怕的瀏覽器會渲染可怕的事情.....你介意分享你的CSS和HTML,以便我們可以幫助! :) – NoobEditor

+3

您應該按照網站所要求的尺寸將圖像保存在服務器上 - 例如如果您的標題顯示爲800x100px,則您的圖片也應該完全爲800x100px。 – Njol

+0

我已經上傳了css和html – totneschap

回答

4

舊IE的方法是:

-ms-interpolation-mode: bicubic; 

這是不良記錄。

+0

謝謝@Barney – totneschap

+30

這對我無效 –

+0

這個問題可以通過jQuery插件來解決:http://stackoverflow.com/questions/34965904/ie-thumbnail-pixelation-when - 高清晰度圖像,是集到小大小 – Spirit