2014-01-14 6 views
6

Ich habe png Bilder auf eine Website hochgeladen, und sie erscheinen perfekt in Firefox, Chrome und Safari, aber sie sehen schrecklich in ie. Ich habe die Dateien von Photoshop gespeichert, und sie haben eine Funktion unter Bildgröße, die Ihnen die Möglichkeit gibt, das Bild als: bikubisch automatisch, bikubisch schärfer, bikubisch glatter, bikubisch, bilinear und nächster Nachbar. Würde einer von diesen helfen?Bilder in ie sind pixelig

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

schreckliche Browser wird Dinge schrecklich machen ..... Sie kümmern sich um Ihre CSS und HTML teilen, damit wir helfen können !! :) – NoobEditor

+3

Sie sollten die Bilder auf dem Server in den von der Website erforderlichen Abmessungen speichern - z. Wenn Ihre Kopfzeile als 800x100px angezeigt wird, sollte Ihr Bild genau 800x100px groß sein. – Njol

+0

ich habe css und html – totneschap

Antwort

4

Die alte IE-Methode ist:

-ms-interpolation-mode: bicubic; 

Diese schlecht dokumentiert ist.

+0

danke @Barney – totneschap

+30

Das hat nicht für mich funktioniert –

+0

Dieses Problem kann von jQuery Plugin gelöst werden: http://StackOverflow.com/Questions/34965904/ie-thumbnail-pixelation-when - Hochauflösendes Bild ist auf kleine Größe eingestellt – Spirit