jQuery css ('padding' ) - Firefox 问题

Question

Firefox(至少 v19.0.2)似乎有 jQuery 问题 css()函数，当您尝试获取元素的 padding 时。

当我使用 .css('padding-left') 时我没有遇到问题，但是写一行而不是 4 行会很好，特别是在像这样的简单功能上这个。

这是一个显示我的问题的示例，请比较 Chrome/Firefox 的行为:

$('#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>

我错过了什么吗？或者是否有一种解决方法可以在不调用 4 个函数的情况下检索元素的 padding？

谢谢。

Answer 1

参见 bug #13421 (虽然这实际上不是错误)。

css() 的文档说:

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 就是这样一个属性，因此您确实必须使用 paddingLeft、paddingRight 等