はChromeで動作しますが、Firefoxでは動作しません - jquery

Question

$('#carat_weight_right li').css('left', function(index, value) { 
    if (value === '100%') { 

     $(this).children('span').css({'margin-left': '-58px', 'text-align': 'right'}); 
     alert('hello'); 

    } 
}); 

クロームで動作するようですが、いずれにも手掛かりはありませんか？

ありがとう

Answer 1

これは、ブラウザ間での実装の違いの楽しいケースです。

Firefoxは、要素のcomputed styleためused valueを返しています。これは、ブラウザで要素をレンダリングするために使用される実際の値であり、Firefoxは100％を認識し、実際には326ピクセルのようなものになり、326ピクセルを返します。 Mozilla talks about their implementation here.

クロム一方、computed styleのspecified value（ "100％"）を返します。

W3Cは、一種の両方が有効であると言う：returning the specified value is fineそれは、文書のレイアウトを必要とせずに行うことができる場合。その値がレイアウト完了後にのみ決定できる場合はreturning the used value is OKです。

だからあなたは何をすべきかですか？その違う方法を見つけてください。 :-)あなたの要素のposition().leftがオフセットの親のwidth()以上であるかどうかを確認することがありますか？