jQuery css ('padding') - Проблема с Firefox

Question

Кажется, что Firefox (по крайней мере v19.0.2) имеет проблему с функцией jQuery css(), когда вы пытаетесь получить элемент .

У меня нет проблемы, когда я использую .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>

Я пропускаю что-нибудь? Или есть ли способ обхода элемента padding без вызова 4 функций?

Спасибо.

Answer 1

См. bug #13421 (хотя на самом деле это не ошибка).

Документация css() говорит:

Сокращенные свойства CSS (например, margin, background, border) не поддерживаются. Например, если вы хотите получить рендерную маржу, использовать: $(elem).css('marginTop') и $(elem).css('marginRight'), и поэтому на.

padding такое свойство, так что вы действительно должны использовать paddingLeft, paddingRight и т.д.