10

上または下、左または右の値をいくつかの要素に設定しています。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/（Chrome / Safariでうまく機能します）

これを防ぐ方法はありますか？私は手に入れたい

4

4 に答える 4

8

私もこの厄介な問題を抱えていました。

一部のブラウザは、要素が現在表示されている場合、計算された位置を返します。秘訣は、それを非表示にし、cssを読み取ってから、再び表示できるようにすることです（まだ非表示になっていない場合）。

autoこれを処理してFirefoxに戻る便利な関数を作成しました。

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返されることが予想される状況でのみ使用する必要があります。

于 2013-12-22T20:09:45.393 に答える
6

以下のコードで「auto」を設定すると、topの整数値を取得できます。

$(function(){
    var top = $('div').offset().top;
    alert(top);
});​
  • 自動に設定した場合のオフセット戻り位置値
于 2013-03-23T19:54:34.773 に答える
4

これはブラウザとそれがスタイルをどのように解釈するかにかかっています、それはあなたのコントロールの外にあります。ただし、特定のCSSおよびjQueryの回避策を使用すると、それを回避できるはずです。たとえば、アイテムを絶対的に配置する必要がない場合は、これを削除するか、次のように変更できます。position:static;

この質問を見てください。

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

于 2012-11-19T15:18:30.793 に答える
0

positionスタイルを削除するだけautoで、計算値の代わりに取得できます。

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

ここでテストできます。

于 2012-11-19T15:13:40.313 に答える