Jquery Bild Größenanpassung Fehler in Internet Explorer 8 und 6

Question

Ich habe eine Website mit einigen JQuery-Techniken entwickelt. Mein Problem ist, dass Internet Explorer 8 und 6 in einigen Fällen die Bilder kleiner aussehen lassen, als sie eigentlich sein sollten. Ich habe nicht mit Explorer 7 nachgesehen, aber es ist wahrscheinlich auch dort ... Beachten Sie, dass die Größenänderung der Seite diese Probleme wahrscheinlich eher verursacht, und tatsächlich bemerkte der Client das Problem auf einem 1024x768-Auflösungsmonitor.

Ich setze die Bilder in ein div und schalte es mit Jquery, wenn eine URL angeklickt wird, für den animierten Effekt. Es funktioniert 100% gut in Firefox, sieht aber im Explorer seltsam aus.

Wie soll es aussehen:

Was es am Ende aussehen wie:

Der Code JQuery ist unten:

<script type="text/javascript"> 

    $(document).ready(function() 
     { 
      $('#header').supersleight({shim: 'images/x.gif'}); 
      $('div[class^=images]').hide(); 

      $('a[class=images-importers]').click(function() { 
         $('div[class=images-importers]').toggle(1000); 
         return false; 
      }); 

      $('a[class=images-suppliers]').click(function() { 
       $('div[class=images-suppliers]').toggle(1000); 
       return false; 
      }); 

     }); 
</script> 

Der HTML-Code für den betreffenden Abschnitt ist auch unter :

<div> 
       <p> 
       <a href="#" class="images-importers">We are the sole importers of the leading aquatic 
       products in Malta.</a> 
       </p> 
       <div class="images-importers"> 
       <div class="imgcontainer-small"> 
        <a href="..."><img src="..." 
        alt="..." class="glossy" /></a> 
       </div> 
       <div class="imgcontainer-small"> 
        <a href=".../"><img src="..." alt= 
        "..." class="glossy" /></a> 
       </div> 
       <div class="imgcontainer-small"> 
        <a href="..."><img src="..." alt= 
        "..." class="glossy" /></a> 
       </div> 

       </div> 
    </div> 

Die CSS-I für die Bilder verwendet:

.imgcontainer-small{ 
    text-align  : left;  
    padding   : 10px; 

}

Vielen Dank für jede Hilfe!

Btw, ist die Website here

Answer 1

Ich denke, es ist das "Glossy" Skript, das ich verwende. Wenn ich es für IE-Browser deaktiviere, erscheint der Fehler nicht mehr.

Answer 2

dies ein Problem mit jQuery oder IE ist nicht - stattdessen ist es ein Problem mit der PNG-Verarbeitung Bibliothek Sie verwenden (supersleight), die das tut.

Es kann tatsächlich die Methode sein, die SuperSight verwendet, um Transparenz auf die PNGs in IE anzuwenden.

Während sie (die meiste Zeit) wirklich funktionieren, sind diese Methoden sehr schlecht für die Leistung. Stellen Sie sicher, dass Sie unbedingt PNGs benötigen. Es gibt oft andere Möglichkeiten, dies zu tun, einschließlich der Verwendung eines separaten Stylesheets für IE-Browser, die Gifs oder ein anderes Bildformat verwenden.