works in chrome but not firefox - jquery

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

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

    }
 });

seems to work in chrome but not fire开发者_Go百科fox any one have a clue ????

thanks

This is a fun case of a cross-browser implementation difference.

Firefox is returning the used value for the element's computed style. This winds up being the actual value in pixels used to render the element in the browser: Firefox sees that 100%, decides in your layout that really equates to something like 326 pixels, and returns 326 pixels. Mozilla talks about their implementation here.

Chrome, on the other hand, returns the specified value ("100%") for the computed style.

The W3C kind of says both are valid: returning the specified value is fine if it can be done without the need for laying out the document; returning the used value is OK if that value can only be determined after layout is complete.

So what are you to do? Find a different way of making that cacluation. :-) Maybe check to see if your element's position().left is greater than or equal to its offset parent's width()?