jQuery css('padding') - Issue with Firefox

Question

It seems Firefox (at least v19.0.2) has an issue with jQuery css() function, when you try to get an element's padding.

I don't have the problem when I use .css('padding-left'), but it would be nice to write a single line instead of 4, particularly on a simple feature like this one.

Here's a sample to show my problem, please compare Chrome/Firefox behaviors:

$('#log').append(
    'padding : '+        $('#sample').css('padding')+'\n'+
    'padding-top : '+    $('#sample').css('padding-top')+'\n'+
    'padding-bottom : '+ $('#sample').css('padding-bottom')+'\n'+
    'padding-left : '+   $('#sample').css('padding-left')+'\n'+
    'padding-right : '+  $('#sample').css('padding-right')+'\n'
);

#sample {
    border: 1px solid black;
    padding: 8px;
    margin: 10px;
}
#log {
    padding: 8px;
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="sample">Lorem ipsum</div>
<textarea id="log" rows="10" cols="50"></textarea>

Am I missing anything ? Or is there a workaround to retrieve an element's padding without calling 4 functions ?

Thanks.

Answer 1

See bug #13421 (although this is not actually a bug).

The documentation for css() says:

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

padding is such a property, so you will indeed have to use paddingLeft, paddingRight, etc.