由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>標籤有兩側固定20像素的填充：

使用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和IE瀏覽器。然而，鉻似乎到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>。

編輯：要清楚，上面的代碼也將使整個「按鈕」可點擊。