title: Padding set by jQuery changes an element's width
body: <p>I have a website that has a few buttons on the home page: <a href="http://www.bniolsztyn.pl" rel="nofollow noreferrer">http://www.bniolsztyn.pl</a> (in Polish, sorry).</p>
  
  <p>There are a couple blue buttons with the following markup:</p>
  
  <pre><code>&lt;div class='more-link'&gt;
      &lt;a href='#'&gt;Read more...&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Their styling is:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>The inner <code>&lt;a&gt;</code> tag has a fixed 20px padding on both sides:</p>
  
  <p><img src="https://i.stack.imgur.com/GAtuV.png" alt="alt text"></p>
  
  <p>Using jQuery, I make it occupy the entire parent div:</p>
  
  <p><img src="https://i.stack.imgur.com/WxDMY.png" alt="alt text"></p>
  
  <p>The jQuery code is as follows:</p>
  
  <pre><code>$(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'
          });
      });
  });
  </code></pre>
  
  <p>Now, everything works fine in Firefox, Opera and Internet Explorer. However, Chrome seems to react to the jQuery code in a peculiar way: it reduces the width of the <code>&lt;a&gt;</code> tags and, as a consequence, displacing the button text to the right:</p>
  
  <p><img src="https://i.stack.imgur.com/9iXtB.png" alt="alt text"></p>
  
  <p>At first, I thought it was a <code>box-sizing</code> issue, but it doesn't seem to be so. Disabling the inline padding added by jQuery brings the element's width back to normal (both left and right padding values must be set in order to see the quirk).</p>
  
  <p>I'm using Chrome 8.0.552.215 and jQuery 1.4.4.</p>
  
  <p>Is this a known problem with Chrome or is it a "What a Terrible Failure" on my side? Is there anything wrong with the code? Can you reproduce the error?</p>