Padding, установленный jQuery, изменяет ширину элемента

Question

У меня есть веб-сайт с несколькими кнопками на главной странице: http://www.bniolsztyn.pl (на польском, извините).

Есть пара синих кнопок со следующей разметкой:

<div class='more-link'>
    <a href='#'>Read more...</a>
</div>

Их стиль:

div.more-link a {
    padding: 8px 20px;
    color: #d0d0d0;
}
div.more-link {
    width: 100%;
    height: 12px;
    padding: 6px 0;
    margin: 4px 0;
    text-align: center;
    background: url(/sites/all/themes/bni/img/button.png) center repeat-x;
    background-color: #1a3754;
    background: -moz-linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5190cf),color-stop(48%,#27527e),color-stop(52%,#1a3754),color-stop(100%,#234a71));
    background: linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
    border: 1px solid #5190cf;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
}

Внутренний тег <a> имеет фиксированные 20px отступы с обеих сторон:

Используя jQuery, я заставляю его занимать весь родительский div:

Код jQuery выглядит следующим образом:

$(document).ready(function(){
    $('div.more-link a').each(function(){
        var container = $(this).parent().width();
        var link = $(this).width();
        var pad = Math.floor((container - link) / 2);
        $(this).css({
            paddingLeft: pad + 'px',
            paddingRight: pad + 'px'
        });
    });
});

Теперь все отлично работает в Firefox, Opera и Internet Explorer. Однако, похоже, что Chrome реагирует на код jQuery особым образом: он уменьшает ширину тегов <a> и, как следствие, смещает текст кнопки вправо:

Сначала я думал, что это проблема box-sizing, но, похоже, это не так. Отключение встроенного отступа, добавленного с помощью jQuery, возвращает ширину элемента к нормальному значению (для того, чтобы увидеть причуду, должны быть заданы значения отступа слева и справа).

Я использую Chrome 8.0.552.215 и jQuery 1.4.4.

Это известная проблема с Chrome или это «Какой ужасный сбой» на моей стороне? Что-то не так с кодом? Вы можете воспроизвести ошибку?

Answer 1

Я не уверен, что вам нужен JQuery для этого. Вы просто пытаетесь центрировать текст <a> внутри "кнопки" контейнера <div>? Если это так, вы можете сделать это с помощью CSS:

div.more-link a {
  color: #d0d0d0;
  display:block;
  line-height: 24px;
}
div.more-link {
  width: 100%;
  height: 24px;
  margin: 4px 0;
  text-align: center;
  background: url(/sites/all/themes/bni/img/button.png) center repeat-x;
  background-color: #1a3754;
  background: -moz-linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5190cf),color-stop(48%,#27527e),color-stop(52%,#1a3754),color-stop(100%,#234a71));
  background: linear-gradient(top,#5190cf 0%,#27527e 48%,#1a3754 52%,#234a71 100%);
  border: 1px solid #5190cf;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
  box-shadow: 0 0 0 1px #244e76, 0 3px 3px rgba(0,0,0,.5);
}

Обратите внимание, я просто удалил отступы из обоих элементов, отрегулировал высоту div и добавил display:block; и line-height:24px; к <a>.

РЕДАКТИРОВАТЬ: Для ясности, приведенный выше код также сделает всю "кнопку" нажатой.