2009-07-22 7 views
0

일부 Jquery 기술을 사용하여 웹 사이트를 디자인했습니다. 내 문제는 일부 무작위로 Internet Explorer 8과 6이 이미지를 원래대로보다 작게 만들 수 있다는 것입니다. 익스플로러 7에서 확인하지는 않았지만, 아마 거기에도있을 것입니다 ... 페이지의 크기를 조정하면 이러한 문제가 발생할 가능성이 더 클 수 있습니다. 실제로 클라이언트는 1024x768 해상도 모니터에서 문제를 발견했습니다.Internet Explorer 8 및 6의 Jquery 이미지 크기 조정 버그

나는 이미지를 div에두고 애니메이션 효과를 위해 URL을 클릭 할 때 Jquery로 토글합니다. Firefox에서는 100 % 잘 작동하지만 Explorer에서는 이상하게 보입니다.

이 보일 것입니다 방법 : How it should look

을이처럼 보이는 끝나는 무엇 : 이 What it ends up looking like

JQuery와 코드는 다음과 같습니다 :

<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> 

관련 부분에 대한 HTML은 아래에 있습니다 :

<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> 

나는 이미지에 사용되는 CSS :

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

} 어떤 도움

감사합니다!

, BTW 사이트는 here

답변

2

필자가 사용하는 "광택있는"스크립트라고 생각합니다. IE 브라우저에서이 기능을 비활성화하면 버그가 더 이상 나타나지 않습니다.

+0

전체 코드를 공유 할 수있는 방법이 있습니까? 나는 당신이 올린 것과 정확히 무슨 일이 일어 났는지 말할 수 없다. – skybondsor

+0

좋아요, 라이브 사이트에 대한 링크를 추가했습니다 : http://users.waldonet.net.mt/aquahobbies/products.html 저는 아직 아마추어 웹 디자이너이기 때문에 제가 실수 한 부분에 쉽게 가십시오 ... 또는 아니, 당신이 좋아하는만큼 그들을 밖으로 가리 킵니다! –

0

이 jQuery를 또는 IE의 문제를 밤은있다 - 대신에, 당신이 그 일을한다 (supersleight)를 사용하고있는 PNG 처리 라이브러리 문제입니다.

IE의 PNG에 투명도를 적용하는 데 실제로 사용되는 방법 일 수 있습니다.

certinaly는 작동하지만 (대부분의 경우) 성능이 떨어집니다. 투명 PNG가 반드시 필요합니다. GIF 또는 다른 이미지 형식을 사용하는 IE 브라우저에 별도의 스타일 시트를 사용하는 등 다른 방법으로이 문제를 해결할 수 있습니다.

+0

수퍼 라이트는 헤더에만 적용됩니다. 그러나, 나는 그것을 제거하려고 노력할 것이고, 어떤 것이 바뀌는지를 볼 것입니다. –

+0

나는 그것을 제거했다, 동일한 일은 다시 일어났다. –

+0

또한 때로는 모든 이미지의 크기가 작아 지거나 일부 이미지가 작아지는 경우도 있고 그렇지 않을 수도 있습니다. –