The padding specified by jQuery changes the width of the element

Question

I have a website with a few buttons on the main page: http://www.bniolsztyn.pl (in Polish, sorry).

There are two blue buttons with the following markup:

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

Their style:

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);
}

The inner tag <a>has a fixed 20px spacer on both sides:

Using jQuery, I force it to occupy the entire parent div:

JQuery code is as follows:

$(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'
        });
    });
});

Now everything works fine in Firefox, Opera and Internet Explorer. However, Chrome seems to react to jQuery code in a special way: it reduces the width of the tags <a>and, as a result, moves the button text to the right:

, box-sizing, , , . , jQuery, , ( , , quirk).

Chrome 8.0.552.215 jQuery 1.4.4.

Chrome " " ? - ? ?

Answer 1

, JQuery, . <a> "button" <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>.

: , "button".