jQuery.css（）：Firefoxは 'auto'の値を返しません。

Question

上下の値と左右の値をいくつかの要素に設定しています。私は、Firefox（16.0.2）で、この値にアクセスしようとしているとき、私はtop（代わりにautoの特定の値）のために間違った値を取得

CSS

div { 
    bottom:200px; 
    left:0px; 
    top:auto; 
    right:auto; 
} 

JS

$(function(){ 
    var top = $('div').css('top'); 
    alert(top); 
});​ 

あなたはここでそれを試すことができます：http://jsfiddle.net/UEyxD/2/（クローム/ Safariでうまく動作します）

これを防ぐ方法はありますか？私がしたい

Answer 1

これはブラウザに依存し、スタイルをどのように解釈するのかは多少なりとも分かりません。しかし、特定のCSSとjQueryの回避策では、回避することができます。たとえば、アイテムを絶対に配置する必要がない場合は、これを削除するか、position:static;に変更してください。

このquestionをご覧ください。 ChromeとIEが異なる値を返す理由として

：の.css（）ブラウザの計算されたスタイルの関数に 統一されたゲートウェイを提供していますが、それは は、ブラウザが実際にスタイルを計算する方法を統一しません。ブラウザでこのようなエッジケースを別々に決定するのは珍しいことではありません。 です。

Answer 2

ちょうどpositionスタイルを削除すると、計算された値の代わりにautoが得られます。

div { 
    top: auto; 
    bottom:20px;  
    right:20px; 
    left:0px; 
} 

hereをテストできます。

Answer 3

あなたはコードの下で「自動」を設定するときは、トップの整数値を取得でき

：

$(function(){ 
    var top = $('div').offset().top; 
    alert(top); 
});​ 

• オフセット戻り位置値を使用すると、自動
に設定し

Answer 4

私も持っていましたこの厄介な問題。

一部のブラウザは、その時点で要素が表示されている場合、計算された位置を返します。そのトリックは、それを隠すこと、cssを読んでから再び見えるようにすることです（既に隠されていない場合）。

私は便利な関数を書いてこれを処理し、Firefoxではautoを返します。

jsFiddle

var getCss = function($elem, prop) { 
     var wasVisible = $elem.css('display') !== 'none'; 
     try { 
      return $elem.hide().css(prop); 
     } finally { 
      if (wasVisible) $elem.show(); 
     } 
    }; 


alert(getCss($('div'), 'top')); 

finallyだけ関数が戻る直前に、バック要素への可視性をもたらすことです。

この関数は、autoが返されると予想される場合にのみ使用してください。