jquery webkitでCSSが動作しない

画像が縦向きの場合はCSSを適用しようとしていますが、なんらかの理由で.css（）がWebkitで動作しません。基本的にイメージタグは 'スタイル'プロパティを取得しません。jquery webkitでCSSが動作しない

$(document).ready(function() { 

    $('.listing .item .thumb img').each(function() { 

      var _img = $(this); 
      var _imgWidth = _img.outerWidth(); 
      var _imgHeight = _img.outerHeight(); 

      if (_imgHeight > _imgWidth) { 
       _img.css('top', '-40%'); 
      } 
    }); 
}); 

<div class="listing about"> 
    <div class="item"> 
     <a href="#" class="thumb"> 
      <img src="../_uploads/siteassets/images/thumb-carousel-2.jpg" /> 
      <span class="frame"></span> 
     </a> 
     <span class="snippet"> 
      <a href="#" class="title">Name Surname</a> 
      <span class="date">Role in the company</span> 
      <p class="description">Lorem ipsum dolor sit amet...</p> 
     </span> 
    </div> 
</div>

私は（.ATTR使用しようとした）代わりの.css（）が、何の：ここに私のコードです。それは動作しません！

理由は何ですか？

出典

2011-10-25 Mauro74

'top' attrubuteは、' absolute'、 'relative'、またはstaticの値を持つ' position'属性を持つ場合にのみ機能します。また、トップがパーセンテージ値を受け入れるかどうかはわかりません。 – sigurd

イメージは絶対的な位置にあり、はい、それはパーセンテージを受け入れ、Webkitを除く他のすべてのブラウザで動作します。 – Mauro74

.ready()が実行されると、画像の寸法が設定されていない可能性があります。

0 > 0はfalseであるため、topプロパティは設定されません。

代わりに$(window).load();、またはthis pluginを使用してください。

出典

2011-10-25 11:36:15 thirtydot

ありがとう、それは動作します！それでも私は他のすべてのブラウザで動作する.ready（）を使用する理由はありません...とにかく助けてくれてありがとう！ :) – Mauro74

画像に幅と高さの属性を明示的に設定した場合（推奨）、最初のバージョンでも機能します。時にはそれをすることができない、あるいはしたくないという理由がありますが、私はそれについて言及したいと思いました。 –

@Elliot Nelson：それはとても良い点です。 – thirtydot

Webkitでは、左または右のオフセットを解釈しないデフォルトの位置はなしです。の相対位置を追加します。 mozillaのGeckoは、相対的な位置を持つかどうかにかかわらず、オフセットを解釈します。

<div style="position: relative; left: 10px;"></div> 
    <script> 
     alert($('div').offset().left); 
    </script>

出典

2012-01-24 12:49:23 WHK

jquery webkitでCSSが動作しない

答えて

関連する問題