jquery image width（）がIE9で正しい値を返していない

イメージタグの幅と高さをautoに指定して、実際のイメージの幅と高さを取得できるようにしました。だから我々はそれらを得るために次のものを使う。 FF、クロム、IE8とサファリでjquery image width（）がIE9で正しい値を返していない

$("img.list-image").width() 
$("img.list-image").height()

、返された幅と高さは、それぞれ125ピクセルと160ピクセルであり、これらの値は正しいです。しかしIE9では、幅は1519ピクセル、高さは771ピクセルです。何らかの理由で、これらの幅と高さの関数がIE9で適切な値を返していません。どんな助けもありがとうございます。

EDIT： は以下の我々は、このキーワードを使用して

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Image Page</title> 
    <style type="text/css" > 
    .list-category-image 
    { 
     border-width: 0px;display:none; 
    } 
    </style> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     //<![CDATA[ 

     $(function() { 
      categoryImageaspectratio(); 
     }); 

     function categoryImageaspectratio() { 
      $("img.list-category-image").one('load', function() { 
       var width = 85.0, height = 85.0; 
       var realWidth, realHeight; 
       realWidth = $(this).width(); // Note: $(this).width() will not 
       realHeight = $(this).height(); 

       //alert("width, height = (" + realWidth + "," + realHeight + ")"); 

       // Now scale the image. 
       var aspectRatio = 1.0; 
       if (realHeight/height > realWidth/width) { 
        aspectRatio = realHeight/height; 
        width = realWidth/aspectRatio; 
       } 
       else { 
        aspectRatio = realWidth/width; 
        height = realHeight/aspectRatio; 
        //alert("aspectRatio = " + aspectRatio); 
        //alert("height = " + height); 
       } 

       var imgWidth = parseInt(width) + "px"; 
       var imgHeight = parseInt(height) + "px"; 

       //alert(imgWidth + ", " + imgHeight); 

       // $(this).css("width", imgWidth).css("heigth", imgHeight).css('display', 'block'); 
       $(this).css("width", imgWidth).css("heigth", imgHeight).css('display', 'block').css('text-align', 'center').css('margin-left', 'auto').css('margin-right', 'auto'); 
      }).each(function() { 
       if (this.complete) { 
         $(this).load(); 
       } 
      }); 
     } 
    </script> 
</head> 
<body> 

    <div style="width:85px; height:85px;"> 
     <img class="list-category-image" src="http://ecx.images-amazon.com/images/I/411j0fCdVKL._SL160_.jpg" alt="" /> 
    </div> 

</body> 
</html>

出典

2011-06-30 mohang

あなたと私たちを提供することができます（非）作業デモ？ – jensgram

あなたのCSSとHTMLを – bravedick

jQueryの最新の安定版を使用していますか？古いバージョンはIE9をサポートしていない可能性があります。 – Luc125

を使用しているコードは、常に非常にトリッキーな、時には混乱して、それはjavascriptのの異なる実装では異なる値可能です。それはあなたの問題を修正するかどうかを確認するための変数として、あなたのイメージを定義しよう：

 var imgList = $("img.list-category-image"); 
     imgList.one('load', function() { 

      var width = 85.0, height = 85.0; 
      var realWidth, realHeight; 
      realWidth = imgList.width(); // Note: $(this).width() will not 
      realHeight = imgList.height();

あなたがこのタイプのが何であるかを確認するには、次のコードを使用することができます。

alert(typeof(this));

出典

2011-07-11 20:30:13

しかし、我々は必要ないくつかの画像を持っていたので、おそらくループが必要です。しかし、問題を修正したjQuery 1.5.1のバージョンを追加してこの問題を解決しました。試してくれてありがとう。あなたの努力に+1してください。 – mohang

jquery image width（）がIE9で正しい値を返していない

答えて

関連する問題